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gitter join chat 


点 击 这 里 开始 在 GitBook 阅读 ! 
点 击 这 里 开始 在 极 客 学 院 Wiki 阅读 ! (中 国 大 陆 访问 速度 较 快 ) 


前 端 开 发 笔记 本 的 GitHub 项 目地 址 在 这 里 。 如 果 你 觉得 这 个 项 目 不 错 ， 请 点 击 
Star 一 下 ， 您 的 支持 是 我 最 大 的 动力 。 


Star 
Watch 
Fork 
Download 
— HTMLA] +-+- 
“(页 面 制作 
UUUUOSSERN tae S 产品 前 端 架 构 





《前 端 笔记 本 》 涵 盖 了 Web aps RATE R on 以 及 所 对 应 的 学 习 路 
径 。 它 并 不 能 当做 一 本 完整 的 学 习 材 料 来 进行 前 端的 学 习 ， 因 为 在 有 限 的 篇 幅 中 无 
DM NN RC 的 知识 点 。 它 更 适合 Me 习 清 单 或 者 是 查询 手册 ， 

合 其 他 在 各 个 方面 更 专业 的 图 书 或 者 官方 文档 来 进行 同步 学 习 。 在 学 习 过 程 中 为 

1 ibl 最 佳 的 学 习 效 果 ， 也 可 将 每 个 技术 点 实现 并 进行 适当 的 拓展 。 


写作 进程 


第 一 版 草稿 完成 时 间 1507252244 


章节 名 称 进程 


第 一 章 页 面 制作 100% 
第 二 章 JavaScript 程序 设计 100% 
第 三 章 DOM 编程 100% 
第 四 章 页 面 构架 100% 
第 五 章 前 端 产品 构架 100% 


1508311803 - 100 Stars: @dszls, thank you! 
1511071358 - 200 Stars: @cschenchen 
1511222144 - 300 Stars: @lujun9972 
1512102333 - 400 Stars: @Niefee 
1601231619 - 500 Stars: @wangdsh 
1603261510 - 600 Stars: @lty2226262 
1605170450 - 700 Stars: @eqzcy 
1608010000 - 800 Stars: @BeOker 
1610050000 - 900 Stars: @butOn 


1612210000 - 1k Stars: @arcobalenoi27 :tada: :tada: :tada: 


相关 链接 


e NEC (N: nice, E: easy, C: css;) 


声明 


前 端 笔记 本 大 纲 及 内 容 由 网 易 云 课堂 前 端 专业 改编 


(cc) GASEN 
This work by Li Xinyang is licensed under a Creative Commons Attribution- 
NonCommercial-ShareAlike 4.0 International License. 


Introduction 


前 端 工程 师 概 述 


[TOC] 

网 页 发 展 史 

Web 1.0 -> Web 2.0 (基于 Ajax) -> Web 3.0 (基于 HTML5) 
网 站 开发 协作 流程 


传统 开发 流程 


优化 开发 流程 


策划 EPA 视觉 





Lr. 


视觉 稿 (配色 图 标 距离 空间 ) + 交互 稿 (APH) =U (用 户 界面 ) 
视觉 稿 -> 页 面 制作 


交互 稿 -> ROLL 


e DOM (操作 HTML 及 CSS 的 接口 ) 
e JavaScript (定义 页 面 互动 ) 

e CSS (定义 页 面 样式 ) 

e HTML (定义 页 面 结果 ) 


e Photoshop (JE El) 
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e Photoshop 


Photoshop 


WA 从 设计 稿 中 切除 网 页 的 素材 并 在 代码 中 引入 图 片 (复杂 的 图 片 或 者 解决 兼容 问 


题 ) 
// 设计 稿 (*.psd) -> 产 出 物 (*png, *.jpg) 
«img src="../img/avatar.jpg" alt="desc"> 
<style type="text/css" media="screen"> 
background-image: url(../../img/sprite.png) ; 


background-position: 0 0; 
</style> 


工具 , 面板 , 视图 
[TOC] 


在 全 局 设置 下 将 单位 修改 为 像素 ， 因 其 在 CSS 中 运用 最 广 (Preference -> Units & 
Rulers -> Units)。 设 置 工作 区 布局 为 切 图 及 图 片 编辑 做 准备 (所 需 窗口 为 信息 窗 
口 ， 图 层 窗口 以 及 历史 记录 窗口 ) 。 


Adobe Photoshop CC 2014 
b ik [dd 5 ap Mode. 
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m. 
[D 
e, 
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LA 





TA Ud & uj 、[ 图 层 窗 口上 、『 历 史 纪 录 窗 口 J」 > [LARAI ` TAAI 
面板 ， 可 以 通过 Window -> Workspace -> New WorkSpaces 保存 工作 区 ， 以 便 下 
次 打开 。 


切 图 常用 工具 


工具 名 示意 图 注释 








移动 工 

E 

4E J 3b E. t s 

e 需 将 自动 选择 调 至 选择 图 层 

魔 棒 工 (4 É Tolerance 越 小 选择 的 范围 就 越 小 ) TÉ RAE S 
E 可 以 让 选择 区 域 光 滑 

剪裁 工 

E 

H KHL E 

Fd 在 裁剪 工具 分 支 下 

缩放 工 

人 Ctrl+ 加 号 与 Ctrl+ 减 号 或 者 alt+ 饼 标 滑轮 
取 色 器 





图 层 (GRAUE) 与 组 (类似 于 文件 夹 ) 的 区 别 。 
辅助 视图 ， 在 视图 菜单 下 启动 


e 对 齐 ， 会 启动 靠近 吸附 功能 
e 标尺 ，Command+R 
e AŽ, > Command + ; 


NO 


View Window Help 


Proof Setup 

Proof Colors 
Gamut Warning 
Pixel Aspect Ratio 


Zoom In 
Zoom Out 

Fit on Screen 
100% 

200% 

Print Size 


Screen Mode 


vV Extras 
Show Layer Edges 


V Rulers sR 


V Snap nr Grid 
Snap To > V Guides 


Lock Guides xX; Vv Smart Guides 
Clear Guides Slices 
New Guide... 


Lock Slices v Pixel Grid 


v UV Overlay 


All 
None 


Show Extras Options... 





NOTE: 所 有 工具 及 快捷 键 如 下 。 


Tools Panel Overview 


@ Selection tools * d Eraser (E) = Bb Path Selection (A) 
= hà Move(V)* "MP Background Eraser (E) Îẹ Direct Selection (A) 
Tg» Magic Eraser (E) 
[^] Rectangular Marquee (M) 
©) Elliptical Marquee (M) = Ò Blur a E Rectangle (U) 
f Single Column Marquee Á Sharpen (3 Rounded Rectangle (U) 
c=- Single Row Marquee 多 Smudge CD Ellipse (U) 
= © Lasso(L) = @ Dodge (0) b € u) 
V^ PolygonalLasso (L) C Burn (0) J Custom Shape (U) 
YB Magnetic Lasso (L) @ Sponge (0) 
EP 4 Quick Selection (W) 
a, Magic Wand (W) Q Painting tools @ Navigation tool 
» 4" Brush (B) B e Hand (H) 
© Crop and Slice tools @ Pencil (B) 党 Rotate View (R) 
^ - 
Crop (C $^ Color Replacement (B) ai 
" 国 ee Crop (C) Ò Mixer Brush (B) À Zoom (Z) 
Æ Slice (C) = & History Brush (Y) 
PAP Slice Select (C) g Art History Brush (Y) 
(9 Measuring tools = E Gradient (G) 
EU steer fi Paint Bucket (G) 
&# 3D Material Eyedropper (1) Mi 3D Material Drop 
9?/* Colors ler (I 
SW @ Drawing and 
Eg Note(l) type tools 
193 Count (I) 
= p> Pen(P) 
@ Retouching tools ig) Freeform Pen (P) 
"Y Healing Brush (J + Add Anchor Point 
3 iets mri () m ? Delete Anchor Point 
4 Patch (J) 八 Convert Point 
PG Content Aware = T Horizontal Type (T) 
tm Red Eye (1) Vertical Type (T) 
= | Clone Stamp(s) "f Horizontal Type Mask (T) 





zE Pattem Stamp (S) "P Vertical Type Mask (T) 


* Indicates defaulttool * Keyboard shortcuts appear in parenthesis 


第 用 快捷 键 
放大 缩小 画布 


e 放大 到 100% 大 小 : Ctrl+ 数 字 1 
e 放大 i Ctrl + 加 号 

e 缩小 : ctrl+ AF 

e alt+ 滚 轮 


合并 图 层 


e 合并 图 层 : ctrl+E 
e 合并 可 见 图 层 : ctrl+shift+E 


工具 、 面 板 、 视 图 
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e 测量 及 取 色 
测量 及 取 色 
所 有 能 接受 数字 的 属性 都 需要 测量 并 尽 可 能 百 分 百 的 还 原 设计 稿 。 
测量 


e TA’ BŽ (width, height) 

e 内 外 边 距 (padding, margin) 

e 边框 (border) 

e 定位 (position) 

e 文字 大 小 (font-size) 

e 行 高 (line-height)， 其 为 第 一 行 的 底 端 到 第 二 行 的 底 端 。 
。 背景 位 置 (background-position) 


NOTE: 测量 时 尽 可 能 放大 画布 以 减少 误差 。 量 取 文 字 是 为 了 减少 误差 尽量 选取 尺寸 
大 的 文字 进行 测量 。 


aç Character P 


SimSun Regular 
rT 12 px 


“一 


tT 100% T 100% 


AZ 0 px Color: 


M LES 400 TENTE £ 


English: USA 





选 框 工具 的 多 用 途 ， 增 (Shift) X (Alt) 以 及 交叉 选择 (Shift + Alt) » ZA (或 
上 下 ) 使 用 分 离 选 框 选择 可 以 得 到 整 两 个 分 离 边框 的 距离 总 值 。 


KE, 
所 有 能 接受 颜色 的 属性 都 需要 取 色 。 


e 边框 色 

e 背景 色 

e 文字 色 
NOTE : 使 用 魔 棒 工 具 可 以 迅速 识别 背景 色 是 否 没 线 性 渐变 的 方法 。Mac OS X 推 
着 使 用 Sip 可 在 Mac App Store 免费 下 载 。 NOTE+ : 可 以 使 用 魔 棒 工具 来 判断 头 
色 是 否 为 渐变 。 


切 图 
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e WA 


ty A 


e 内 容 性 图 片 指 的 是 图 片 在 页 面 是 作为 内 容 存 在 ， 如 页 面 中 的 海报 。 
e 修饰 性 图 片 指 的 是 图 片 在 页 面 中 起 修饰 作用 ， 如 页 [ 面 中 的 背景 和 图 标 。 


修饰 性 图 标 和 内 容 性 图 片 需要 (在 HTML <img 之 中 ， 只 需 站 位 不 需 切 图 ) 
切 出 。 切 出 的 内 容 性 图 片 应 保存 为 * jpg 格式 ， 而 修饰 性 图 片 因 保存 为 
png24 (IE6 不 支持 半 透 明 ，Alpha £) 或 png8 它们 均 支 持 全 透明 。 


隐藏 文字 ， 方 法 一 ， 直 接 在 图 层 中 隐藏 文字 图 层 。 方 法 二 (两 种 ， 分 别 应 对 于 纯色 
和 有 背景 需要 隐藏 文本 的 情况 ) 如 下 图 所 示 ， 使 用 自由 变换 。 





PNG24 E 7r iX 


e 移动 工具 选中 所 需 图 层 (Ctrl 多 选 ) 

e 右键 合并 图 层 (CtrL +E) 
PNG8 带 背景 切 图 方法 

e 合并 可 见 图 层 (Shift + Ctrl+E) 

e 和 矩形 选 框 选择 内 容 

e 魔 棒 工具 去 除 多 余部 分 (Alt + HR) 
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可 平 铺 背 景 的 切 图 方法 


e 用 矩形 选择 一 个 区 域 
e 复制 至 新 图 层 


NOTE: X 轴 平 铺 需 要 占 满 图 片 的 帘 ，Y 轴 平 铺 需要 占 满 图 片 的 高 。 
切片 工具 (大 图 化 小 的 方法 ， 将 一 大 图 分 为 多 小 图 ) 


。 拉 参考 线 

。 选择 切片 工具 

e 点击“ 基于 参考 线 的 切片 ” dida 
。 选择 切片 选择 工具 

。 保存 于 新 图 层 


如 何 开始 切 图 


第 一 步 : 去 掉 所 有 文字 ， 只 留 背景 


打开 视觉 稿 后 ， 用 上 面 说 过 的 方法 去 掉 所 有 的 文字 ， 只 留 背景 和 图 片 〈 记 得 备份 一 
下 PSD 文 件 ) 。 


Fi 
F 
* 
LA 
px 
一 


La 
ES 
P 
E 








第 二 步 : 保存 图 片 


将 去 掉 文 字 的 图 片 保存 起 来 。 一 般 情况 下 内 容 性 图 片 保存 为 jpg 格 式 ， 图 标 类 型 的 保 
存 为 png 格 式 。 











| Images Show Less 
| 
c T 
¥ B - (Ce 
Ww Eb by. = s 
@ album.jpg collection.png comment.png dj-arrow.png icon.jpg logo.png music.png 
F rl i. 
s ME —23 d 
play.png play2.png share.png shareToYX.png top-bg.png userlcon1.jpg userlcon2.jpg 
1 7 F 
a s 





userlcon3.jpg userlcon4.jpg userlcon5.jpg userlcon6.jpg vip.png 


第 三 步 : 构思 页 面 的 具体 实现 


划分 页 面 的 结构 ， 具 体 的 实现 方式 。 


#0 :—3i3ASHTMLAUS > —323 € RE, 


IRAE 4g X9 89 3G 0 4534» 7E36 78 E HTML NJ » HAAS GE (3| fO CS © 
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e 图 片 保存 
o 保存 格式 的 选择 
e 图 片 修改 与 维护 


图 片 保存 


将 需要 的 内 容 保 存在 独立 的 文件 里 便于 之 后 的 导出 。 (存储 于 Web 所 用 格式 Alt 
+ Shift + Ctrl+S) 


如 需 保 存 独 立 图 层 则 要 把 需要 的 图 层 拖 到 新 建 的 透明 背景 的 图 层 ， 或 在 图 层 上 右键 
X*| (Duplicate) 图 层 选择 地 址 为 新 文件 即 可 。 


图 片 与 背景 合并 的 切 图 方法 如 下 


包含 歌曲 列表 6 首 歌 


atx ERE En 时 长 歌手 
北京 之 雪 04:19 Aim 

% C ARAL 0616 Ætt 
Angel 05:11 Sarah McL 
Love Of My Life 03:45 Queen 


保存 格式 的 选择 


保存 类 型 一 : 色彩 丰富 切 无 透明 要 求 时 保存 为 ”JPG 格式 并 选用 时 候 的 品质 (通常 
使 用 品质 80 ) 。 


保存 类 型 二 : 图 片 色 彩 不 丰富 ， 不 伦 透 明 与 否 一 律 保存 为 ”PNG8 格式 (256M 
色 ， 需 特殊 设置 如 下 图 ， 需 设置 杂 边 :无 无 仿 色 ) © 


图 片 保 存 















































ooe€ Save for Web (10096) 
Preset: | PNG-8NoDither [9 = 
PNG-8 B 
(Sew B cow: B 
(wwe B owe 
@ Transparency Matte: None B 
C Interlaced websnap: 0% B 
[C] Embed Color Profile 
© Convert to sRGB 
Preview: Monitor Color B 
Metadata: | Copyright and Contact Info B 
Color Table E 
9 
Looping Options: | Once 
BE 1% Bj rR- c- B:- © | Alpha:-- — Hex- BE 1of1 << < pi | pp 











| Preview... | o |) [| Sav. | | Cancel | Done 





保存 类 型 三 : AAAF (Alpha A) 的 要 求 ， 保 存 为 ”PNG24 格式 (不 对 图 
片 进行 压缩 ) 。 


保存 类 型 四 : 保留 PSD 源 文 件 ， 以 备 不 时 之 需 。 

如 何 保存 

一 般 使 用 『 存 储 于 Web 所 用 格式 上 菜单 (Alt Shift + Ctrl +S) 保存 
图 片 修 改 与 维护 


维护 与 修改 之 一 : 更 改 画 布 大 小 以 便 增加 新 素材 。 
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维护 与 修改 之 二 : 移动 图 标 分 两 种 ， 独 立 图 层 (移动 工具 拖 动 ) ， 于 非 独立 图 层 
(选取 工具 选中 分 离 后 移动 工具 拖 动 ) 。 








维护 与 修改 之 三 : 裁剪 画布 的 方法 有 两 种 ，(1) 用 选取 工具 选取 后 图 片 裁 取 ，(2) 直 
接 用 裁剪 工具 裁剪 画布 。 





Q 





注意 事项 : 为 了 可 维护 性 的 考虑 因 适 当 的 留 出 适当 的 宝 白 区 域 以 便 修改 所 用 和 提高 
容错 性 。 PNG8 需 更 改 图 片 颜色 模式 为 RGB 颜色 (默认 为 索引 顾 色 模式 ， 颜 色 信 
RARER) 。 


Untitled 


60 55 ( 4( x 25 ) 15 
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e 图 片 优化 与 合并 
o 图 片 的 兼容 


图 片 优 化 与 合并 
在 HTML 中 使 用 背景 图 片 的 方法 如 下 : 
«button type="button" class="btn-default">Click Me</button> 


<style type="text/css" media="screen"> 
.btn-default { 
background: url(image/btn.png) no-repeat 0 0; 


} 
.btn-default-alt { 
background: url(image/sprite.png) no-repeat © -50px; 


} 
</style> 


图 片 的 合并 就 如 同上 面 提 到 的 切 图 后 保存 的 过 程 。 拼 好 的 图 称 之 为 Sprite 它 能 减少 
网 络 请 求 次 数 提高 速度 。 图 片 压缩 工具 分 为 无 损 (ImageOptim 等 工具 ， 也 可 结合 
Grunt 自动 化 构建 工具 一 同 使 用 ) 与 有 损 压 缩 工具 (TinyPng) ° 


图 片 合并 
图 片 合并 建议 方案 : 


e 同 个 模块 的 图 片 合并 
e 大 小 相近 的 图 片 合并 
e 色彩 相近 的 图 片 合并 
e 以 上 3 种 合并 混合 


合并 的 图 片 可 以 以 横向 或 纵向 的 排列 ， 分 类 可 将 同属 于 一 个 模块 【功能 模块 ) ， 大 
小 相近 (充分 利用 画布 空间 ) ， 磊 色相 近 (减少 文件 大 小 ) 。 


图 片 的 兼容 


IE6 不 支持 PNG24 半 透 明 所 以 需要 保存 两 份 (sprite.png - png24 和 sprite-ie.png - 
8) 。 在 使 用 CSS3 是 让 高 级 浏览 器 使 用 CSS3 低级 浏览 器 则 使 用 切 图 。 优 雅 降 级 
指 的 是 让 低级 浏览 器 不 显示 高 级 浏览 器 中 的 界面 细节 。 
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e 开发 及 调试 工具 


开发 及 调试 工具 


e. 文本 编辑 器 或 IDE (集成 开发 环境 ) 
e Google Chrome, Firefox Firebug, Safari Developer Tool 


NOTE: Google Chrome DevTools Doc 
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Sublime A #4 

介绍 

Sublime Text 是 一 款 性 感 的 编辑 器 ， 上 有 具有 优雅 ， 快 速 ， 插 件 多 等 优势 ， 不 失 为 前 端 
开发 者 的 轻 量 高 效 编辑 器 。 

安装 

Windows/OS X 

官方 站 点 下 载 安 装 即 可 。 

Ubuntu 


可 参见 Ubuntu 下 使 用 Sublime Text 并 解决 中 文 输入 问题 ， 用 apt-get 安 装 ， 解 决 任 
务 栏 ， 中 文 输入 等 多 个 问题 。 


Sublime 快捷 键 


command/control+P 进入 查找 命令 (Goto Anything) ,此 时 有 三 种 选择 : 


e : 输入 行 数 找到 对 应 行 (control+G) 
e @ 找到 特定 函数 (command/control+R) 
e s 找到 对 应 变量 与 块 

推荐 插件 

1.Package Control 


以 后 的 插件 安装 基本 都 靠 他 了 ， 安 装 方法 可 以 去 Package Control 查 看 ， 注 意 
Sublime Text 的 版 本 问题 。 


2.Emmet 

前 端 神 器 ， 相 信 搞 前 端的 没有 不 用 的 

下 面 插件 在 Edit 或 者 Tools 里 面 看 到 插件 功能 : 

3.JQuery 

写 JQuery 怎 么 能 不 用 他 来 增强 你 的 提示 ? 

4.FileHeader 

自动 创建 文件 开头 模板 ， 并 且 会 根据 最 后 的 保存 时 间 修 改 更 新 时 间 
5.Pretty Json 

写 json 不 格式 话 怎么 行 ? 

6.CSS Format 


css 格 式 化 
7.ConvertToUTF8 
GBK 编 码 兼容 

用 户 自 定 义 代码 


Preferences - Settings - User 里 面 加 入 ， 全 部 的 设置 均 为 JSON 文本 。 


"translate tabs to spaces": true, 
"tab size": 2, 


把 Tab 对 齐 转化 为 空格 对 齐 ，tab_size 控制 转化 比例 。 
"trim trailing white space on save": true, 
自动 移 除 行 尾 多 余 空格 。 


"ensure newline at eof on save": true, 





自动 在 文件 末尾 加 入 一 个 空 行 ，git 用 户 相信 知道 是 干 嘛 的 。 
"save on focus lost": true, 
窗口 失去 焦 后 立即 保存 文件 。 


"bold folder labels": true, 


侧 栏 文件 夹 加 粗 。 


Atom 文本 编辑 器 


本 文 即 为 在 Atom 下 编写 完成 ， 在 写作 过 程 中 让 我 对 这 个 办 新 的 1.0 版 本 文本 编辑 
器 有 了 更 多 的 了 解 。 在 阅读 本 文 时 注意 快捷 键 于 后 面 英文 单词 的 对 应 可 帮助 记 
忆 ， 在 使 用 中 忘记 的 快捷 键 以 可 以 通过 使 用 查询 面板 (后面 会 提 到 ) 进行 查询 。 
如 果 你 在 使 用 过 程 中 发 现 了 异常 和 错误 可 以 到 Atom 所 在 的 GitHub 仓库 提交 问题 
报告 。 同 一 款 编 辑 器 一 同 成 长 ， 愿 力量 与 你 同 在 ! 下 面 的 快捷 键 均 为 Mac OS X 
默认 设置 。 ded 的 是 Windows 或 者 是 Linux， 可 能 需要 尝试 将 所 有 提 到 的 cmd 
RA ctrle 


基础 中 的 基础 


开始 之 前 先 把 下 面 这 条 快捷 键 记 住 。cmd+shift+P 它 会 打开 类 似 Alfred 的 快捷 功 
能 选择 窗口 ， 如 果 你 从 来 没有 听 过 Alfred (此 为 Mac OS X 特有 应 用 ) 那 你 应 该 
赶紧 去 所 搜 引 擎 中 找 找 了 。 


保存 时 间 
快捷 键 描述 
cmd-shift-S 可 以 另存 为 "Save As" 
cmd-alt-S 可 以 保存 全 部 的 "Save All". 


打开 文件 与 目录 
如 果 在 命令 行 环 境 中 可 以 使 用 下 面 的 方法 一 次 打开 多 个 目录 。 


H l-i El g 
4l7F AK 


atom ./hopes ./dreams 


t IK AER #7) 


atom -h 


快捷 键 描述 
cmd-0 打开 文件 
cmd-shift-0 添加 目录 至 当前 编辑 器 窗口 


cmd-P 可 以 打开 Fuzzy Finder 进行 模糊 搜索 ， 默 认可 所 搜 区 域 为 项 目 内 所 有 文 
件 。 下面 的 命令 可 以 对 模糊 所 搜 做 一 些 限制 ， cmd-B 只 所 搜 已 打开 的 文件 (存在 
£j Buffer 中 的 文件 ) 。 cmd-shift-B 


1.0 版 本 中 在 编辑 器 中 添加 的 新 文件 无 法 使 用 Fuzzy Finder (模糊 寻找 ) 找到 ， 重 
启 后 则 可 以 解决 。 


边栏 ( 树 目录 ) 


快捷 键 描述 
cmd-\ 显示 或 隐藏 边栏 
ctrl-0 聚焦 边栏 ， 聚 焦 后 可 以 操作 树 目 录 中 的 文件 


在 聚焦 后 可 以 通过 a 来 增加 (add) > m 来 移动 (move) > d 来 复制 
(duplicate) 或 者 delete 来 删除 (此 处 为 键盘 删除 键 ) 。 这 里 的 操作 并 没有 自 
动 路 径 补 全 功能 ， 之 后 可 能 需要 插件 支持 。 


开始 使 用 


Atom 中 几乎 所 有 的 功能 都 是 以 插件 的 形式 存在 的 。 所 有 如 何 安装 插件 则 就 是 我 们 
第 一 件 要 做 的 事 。 除 了 图 形 界 面 安 装 的 方法 外 ， 随 Atom 还 安装 了 插件 管理 器 叫做 
apm 。 通 过 它 也 可 以 直接 安装 和 更 新 插件 。 简 单 说 主题 也 是 插件 ， 所 以 安装 主题 
与 安装 插件 的 步骤 类 似 。 


# 安装 插件 
apm install «package name» 


# 安装 指定 版 本 的 插件 
apm install <package_name>@<package_version> 


# 查询 插件 
apm Search <package_name> 


# 查询 插件 详情 
apm View <package_name> 


移动 光标 


Atom 的 移动 快 方法 同 Emacs 一 致 。 在 熟悉 使 用 Atom 后 也 很 容易 的 转移 至 
Emacs 的 环境 下 熟练 工作 。 


单个 字符 的 移动 ， 效 果 于 方向 键 一 致 。 


ctrl-P 
ctrl-N 
ctrl-B 


ctrl-F 


快捷 键 


描述 


上 移 
TË 
ak 
"y 


前 移 


Previous) 
Next) 
Back) 


NM 


Qe 


( 
( 
( 
( 


Forward ) 


在 单个 字符 移动 基础 上 ， 可 以 延展 至 更 大 范围 的 移动 。 例 如 ， 单 词 ， 整 行 。 


快捷 键 


alt-B 


alt-F 


ctrl-E 
ctrl-A 


ctrl-A 
次 ) 


cmd -up 


cmd - down 


ctrl-G 加 数字 可 移动 至 目标 行 ， 使 用 


(aia A 


描述 


向 后 以 词 为 单位 移动 (XE XC) 


间隔 


向 前 以 词 为 单位 移动 (XE XC) 


间 隔 

移动 至 行 末 (End) 

移动 至 此 行 首 字符 (Ahead) 
移动 至 此 行 行 首 (包括 空格 ) 
移动 至 文件 最 顶 


移动 至 文件 最 低 


用 这 个 方法 在 查找 错误 时 变 得 十 分 方便 。 


， 中 文 则 以 英文 标点 为 


， 中 文 则 以 英文 标点 为 


row:column 可 以 定位 行 数 和 列 数 ， 使 


cmd-R 可 以 在 当前 文件 中 (Buffer) 按照 符号 来 搜索 ， 符 号 关键 字 指 的 是 函数 名 


(代码 中 ) 


$K 


选 


或 标题 (文档 中 ) 。 


选择 是 在 移动 的 基础 上 加 入 shift 既 可 完成 。 特 别 的 几 种 选择 方法 如 下 。 


快捷 键 描述 


cmd -上 L 选取 整 行 
ctrl-shift-W 选取 当前 单词 (Xx) ， 中 文 则 为 整 行 
编辑 与 删除 


Atom 如 同 其 他 的 常用 的 文本 编辑 器 一 样 可 以 直接 编辑 文字 ， 并 不 存在 特殊 的 模 
式 。 但 了 解 下 面 的 编辑 技巧 可 以 让 你 使 用 Atom 更 得 心 应 手 。 


编辑 操作 
快捷 键 描述 

pb 交换 光标 两 边 的 字符 (Transpose) 
ctrl-J 将 下 一 行 同 当前 行 合 并 (Join) 
ctrl-cmd-up 向 上 冒 泡 当前 行 
ctrl-cmd-down 向 下 冒 泡 当 前 行 
cmd-shift-D 复制 当前 行 ( Duplicate) 
cmd-K, cmd-U 转换 选中 字符 至 全 大 写 
cmd-K, cmd-L 转换 选中 字符 至 全 小 

删除 操作 

快捷 键 描述 

ctrl-shift-K 删除 当前 〈Cut) 
cmd-delete 删除 此 行 光 标 后 全 部 字符 
cmd-backspace 删除 至 当前 行 首 
ctrl-K 切 帖 至 行 末 (Cut) 
alt-H 删除 前 一 个 字符 
alt-D 删除 后 一 个 字符 

多 个 光标 及 选择 


F] Sublime Text 相同 ，Atom 也 同样 有 多 光标 的 实现 。 按 住 Cmd 可 以 在 文本 中 使 
用 进行 区 域 性 选择 。 


快捷 键 描述 


cmd click 在 点 击 处 增加 新 光标 

cmd-shift-L 将 选择 区 域 转换 为 多 光标 

ctrl-shift-up 在 上 一 行 增 加 新 光标 

ctrl-shift-down 在 下 一 行 增 加 新 光标 

cmd -D 选择 下 一 个 于 当前 被 选 字符 相同 的 字符 并 添加 新 光标 

cmd-ctrl-G 选择 全 部 于 当前 选中 字符 相同 的 字符 并 添加 光标 
括号 


编程 中 最 常 打 交道 和 需要 跳出 的 英 属 于 括号 和 引号 了 。Atom 对 于 括号 有 很 好 的 处 
理 办 法 ， 各 种 括号 在 光标 内 移动 都 会 被 自动 高 亮 〈《 引 号 和 HTML 中 的 标签 也 会 被 
高 完 和 自动 补 全 ) 。 选中 内 容 后 使 用 括号 可 以 自动 将 选中 内 容 包 含 在 括号 或 引号 
内 o 


快捷 键 描述 
ctrl-M 跳 至 最 近 的 一 个 括号 的 起 始 位 置 
ctrl-cmd-M 选中 括号 内 的 所 有 内 容 
alt-cmd-. 关闭 最 近 的 一 个 XML/HTML 标签 
搜索 与 替换 
快捷 键 描述 
cmd -F 当前 文本 中 搜索 
cmd-shift-F 搜索 整个 项 目 
cmd-G 找到 下 一 个 匹配 的 搜索 结果 
cmd-G-shift 找到 上 一 个 匹配 的 搜索 结果 


在 项 目 搜索 中 可 以 使 用 wildcard 和 指定 目标 的 搜索 路 径 。 


代码 片段 (Snippets ) 


代码 片段 让 你 在 写 代 码 时 有 飞 一 般 的 感觉 ， 代 码 片 段 会 将 预先 设置 好 的 代码 片段 蔡 
换 在 当前 文本 中 ， 并且 设 置 焦 点 并 用 tab 聚焦 下 一 个 焦点 ， 或 Shift + tab X 
焦 上 一 个 焦点 。 


所 有 的 代码 片 都 存储 在 下 面 的 目录 中 -/.atom/snippets.cson ， 你 可 以 通过 


Open Your Snippets Menu 打开 此 文件 。 


快捷 键 描述 
alt-shift-S 显示 当前 文件 类 型 下 的 全 部 代码 片段 


当然 制作 代码 片 也 有 一 个 代码 片 ， 它 就 是 snip 。 
制作 代码 片段 


下 面 是 一 个 简单 的 代码 片 样 例 。 


Source: jis: 
'console.log': 
‘prefix’: log 
"body ' : 'console.log(${1: "crash"});$2' 


e .source.js 为 代码 片 可 用 的 文件 类 型 范围 

e console.log 为 代码 片 内 容 描 述 

e prefix 为 代码 片 调用 字符 

e body 代码 片 主体 内 容 

e ${1:'crash'} 用 于 定义 焦点 ， 顺 序 及 其 默认 值 


多 行 代码 代码 片 


',source.js': 

Lr ISe ali else: 
'prefix': 'ieie' 
bodys: uui 

if (${1:true}) { 
$2 

} else if (${3:false}) { 
$4 

} else { 
$5 

} 


aT EE 


TV A d ANB F1 38 I TA E SABAH RAG o 


快捷 键 描述 
alt-cmd-[ ae 4 WER 
alt -cmd-] 展开 当前 层级 
alt -cmd-shift-{ HREBER 
alt-cmd-shift-} 展开 全 部 层级 
cmd-K, cmd-N (层级 数 ) ARE ERR a BE 


多 窗口 模式 


任意 一 个 窗口 都 可 以 无 需 的 四 面 分 割 ， 分 割 的 部 分 则 依然 使 用 标签 来 表示 。 


快捷 键 描述 
cmd-k arrow 根据 方向 指定 分 割 窗口 
cmd-K，cmd-arrow 聚焦 指定 方向 的 窗口 


解码 (Encoding) 
Atom 支持 多 种 解码 格式 (包括 中 文 GBK 的 支持 ) ， 也 可 自动 识别 解码 方式 (不 
能 识别 时 则 默认 为 UTF-8) 。 当 然 你 也 可 以 使 用 这 种 方法 将 多 种 文本 在 多 种 解码 格 
式 直接 转换 。 
快捷 键 描述 
ctrl-shift-U 切换 解码 方式 
书签 


在 Atom 添加 书签 就 如 同 你 看 书 的 时 添加 书签 一 样 ， 它 使 你 在 书写 代码 时 可 以 自如 
的 跳 转 到 你 需要 的 位 置 。 


快捷 键 描述 


F2-cmd 可 以 在 当前 行 切 换 标 记 书 签 
F2 跳 转 至 下 一 个 书签 
F2-shift 跳 转 至 上 一 个 书签 
F2-ctrl 查看 全 部 的 书签 
F2-cmd-shift 清除 全 部 标签 

扩展 插件 


下 面 列 出 了 笔者 在 日 常 Web 开发 中 所 易 用 的 插件 ， 这 些 插件 满足 了 超过 百 分 之 九 
十 笔者 的 开发 需求 。 下 面 的 这 些 插件 均 可 以 在 官方 插件 管理 器 中 进行 下 载 和 安装 。 


"name": "advanced-new-file", 
NEES Tont- UOMA TSi 


"name": "advanced-open-file", 
"version": "90.9.2" 


"name": "atom-beautify", 
UVES TON 92979 


"name": "AtomicChar", 
"version": “O.3.8" 


"name": "autocomplete-paths", 
verston 2) sO. 2 


"name": "docblockr", 
UN ees me 3 


Atom 编辑 


ES 


a 


"name": "ex-mode", 
"version": "9.7.9" 


"name": "file-icons", 
D Vensqoni eo 


"name": "language-jade", 
"version s 892672" 


"name": "linter", 
"Version: d. 9:9" 


"name": "linter-jshint", 
iver sion = Vds oa 


"name": "markdown-toc", 
"versioni: 'O.3.0)" 


"name": "merge-conflicts", 
versione Ss 


"name": "minimap", 
"wersaon ©: 54. 12-27 


"name": "minimap-linter", 
version: = seu 


"name": "open-in-browser", 
“WersSaon i 49:4. 6^ 
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Atom 编辑 


ES 


a 


"name": "pigments", 


"version": "0.9.3" 
"name": "sort-lines", 
Verson 9.11.0" 
"name": "sync-settings", 
Versions 2. 5097 60^ 
"name": "tab-switcher", 
"Version = 1. 2:1 
"name": "theme-switcher", 
Myerson): d do^ 
"name": "vim-mode", 
"version: "90-57.90" 
"name": "atom-dark-syntax", 
yersqonss OR Ou 
"theme": "syntax" 


"name": "atom-dark-ui", 


"version": "9.49.0", 
"theme": "ui" 

"name": "atom-light-syntax", 
MYERSON = "9:28.09 
"theme": "syntax" 


"name": "atom-light-ui", 
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Atom 编辑 


wy. 


FS 


a 


version: "0-41.9' 

"theme": "ui" 

"name": "base16-tomorrow-dark-theme", 
"yersdont: "0226.0", 

"theme": "syntax" 

"name": "base16-tomorrow-light-theme", 
"version": "0.9.0", 

"theme": "syntax" 

"name": "one-dark-ui", 

‘version? O02 

"theme": "ui" 

"name": "one-dark-syntax", 

avens Tom- qp 

"theme": "syntax" 

"name": "one-light-syntax", 
Version I deg 

"theme": "syntax" 

"name": "one-light-ui", 

ver sqOIo: T9. 22 

"theme": "ui" 

"name": "solarized-dark-syntax", 
“version = “"O238 i") 

"theme": "syntax" 

"name": "solarized-light-syntax", 
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Atom 编辑 器 


"version" "9.22.4. 
"theme": "syntax" 

ty 

{ 
"name": "about", 
Versioni m 170.1 

tr 

{ 
"name": "archive-view", 
"Ver SION. 705589" 

ty 

{ 
"name": "autocomplete-atom-api", 
"version": "9.9.2" 

i 

{ 
"name": "autocomplete-css", 
"version": "0.9.0" 

tr 

{ 
"name": "autocomplete-html", 
"version": "9.7.2" 

tr 

{ 
"name": "autocomplete-plus", 
Me SION 72:19:07 

tr 

{ 
"name": "autocomplete-snippets", 
"Version! 1. 7:1 

tr 

{ 
"name": "autoflow", 
Mersion' = "0.25.0" 

tr 

{ 
"name": "autosave", 
“version: "0.22.0" 

tr 


Atom 编辑 


ES 


ve 


"name": "background-tips", 
"version": "0.25.0" 

"name": "bookmarks", 
uversiont: 790 35597 

"name": "bracket-matcher", 
"yersion = "0.76.0" 

"name": "command-palette", 
"version": "0.36.0" 

"name": "deprecation-cop", 
"ye sdonbs possc qe 

"name": "dev-live-reload", 
"version": "0.46.0" 

"name": "encoding-selector", 
Myersion. 2) 70:21:97 

"name": "exception-reporting", 
"version": "0.36.0" 

"name": "find-and-replace", 
"version = "0.175.060" 

"name": "fuzzy-finder", 
"version": "0.87.0" 
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Atom 编辑 器 


"name": "git-diff", 
versione: 59:55:07 

ty 

{ 
"name": "go-to-line", 
"version": "9.30.0" 

tr 

{ 
"name": "grammar-selector", 
"version's OR On 

ty 

{ 
"name": "image-view", 
"version"; "9.54.9" 

i 

{ 
"name": "incompatible-packages", 
"version: 49:24. 1 

tr 

{ 
"name": "keybinding-resolver", 
"version"; "9.33.0" 

tr 

{ 
"name": "link", 
aversion- RS 

tr 

{ 
"name": "markdown-preview", 
"version": "0.150.0" 

tr 

{ 
"name": "metrics", 
Verson: "9:51.07 

i 

{ 
"name": "notifications", 
“version: "0757.9" 

tr 


Atom 编辑 器 


"name": "open-on-github", 
D versdon):550.360.0^ 

ty 

{ 
"name": "package-generator", 
"version": "0.40.0" 

tr 

{ 
"name": "release-notes", 
"version 079095997 

ty 

{ 
"name": "settings-view", 
"version 70:211:2? 

i 

{ 
"name": "snippets", 
"version": "9.95.09" 

tr 

{ 
"name": "spell-check", 
"version": "9.59.90" 

tr 

{ 
"name": "status-bar", 
aversion q 997 75. 19 

tr 

{ 
"name": "styleguide", 
"version": "0.44.0" 

tr 

{ 
"name": "symbols-view", 
"version": "9.100.0" 

i 

{ 
"name": "tabs", 
“version: "0782.0" 

tr 


Atom 编辑 器 


"name": "timecop", 
"VORSLOM 2 2 Or 31:07 

ty 

{ 
"name": "tree-view", 
"version": "9.180.0" 

tr 

{ 
"name": "update-package-dependencies", 
versione: 290500297 

ty 

{ 
"name": "whitespace", 
"version": "9.30.0" 

i 

{ 
"name": "wrap-guide", 
"Version = 40595:.9 

tr 

{ 
"name": "language-c", 
"version": "9.45.09" 

tr 

{ 
"name": "language-clojure", 
‘version: "0.1650" 

tr 

{ 
"name": "language-coffee-script", 
"version": "0.41.0" 

tr 

{ 
"name": "language-csharp", 
"version: "9.6.0" 

i 

{ 
"name": "language-css", 
“version: "0.32.17 

tr 


Atom 编辑 器 


"name": "language-gfm", 
"version": "0.80.0" 

ty 

{ 
"name": "language-git", 
wersion' = 49.500 9: 

tr 

{ 
"name": "language-go", 
“version M ORSINON 

ty 

{ 
"name": "language-html", 
"versdon' :; "9.40.0" 

i 

{ 
"name": "language-hyperlink", 
"version: 7054149" 

tr 

{ 
"name": "language-java", 
"version": "9.15.0" 

tr 

{ 
"name": "language-javascript", 
“version: = 89:95:39 

tr 

{ 
"name": "language-json", 
TyerpSsqonb Orb 

tr 

{ 
"name": "language-less", 
versionin "79.28.1" 

i 

{ 
"name": "language-make", 
“version: "9:34.09" 

{ 
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Atom 编辑 器 


"name": "language-mustache", 
versione 40:12:07 

ty 

{ 
"name": "language-objective-c", 
"version": "9:15.09" 

tr 

{ 
"name": "language-perl", 
aversion 2090728.297 

ty 

{ 
"name": "language-php", 
"verslon'"^: "0:27.07 

i 

{ 
"name": "language-property-list", 
"version: "028.0" 

tr 

{ 
"name": "language-python", 
"version": "9:38.90" 

tr 

{ 
"name": "language-ruby", 
VET SOM On oye. 

tr 

{ 
"name": "language-ruby-on-rails", 
"version": "0.22.0" 

tr 

{ 
"name": "language-sass", 
"version": "0.40.0" 

tr 

{ 
"name": "language-shellscript", 
“version: "0:15.90" 

{ 
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Atom 编辑 


ES 


a 


"name": "language-source", 
"version": "0.9.0" 


"name": "language-sql", 
wersion' = 49. 17.9 


"name": "language-text", 
"Versione 9c oA 


"name": "language-todo", 
"verslon'^: "0:25.90" 


"name": "language-toml", 
version = c ororo 


"name": "language-xml", 
"~ersion + "0.3010" 


"name": "language-yaml", 
"yersqonmes259:22 009 
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e HTML 
o HTML 历史 


HTML 


HTML 历史 


HTML (Hyper Text Markup Language)， 用 于 标记 页 面 中 的 内 容 。 






2008 
1991 1996 1999 html5 


html3.2 html4.01 





2014 html5 


html2 Html4.0 2000 
xhtml1.0 2001 2005 


xhtml1.1 xhtml2.0 


Table of Contents generated with Doc Toc 


e HTML 简介 


HTML 简介 


文档 声明 


!DOCTYPE html 


LJ 


<html> 


<meta charset-"utf-8"» 


meta name= “keywords” content= “$R... 


-~ RY > 》 
<meta name= “description” content=“ 网 易 ...”/》 文档 J Hb 
《title> 网 易 云 音乐 Uum title» 


<iframe>...</iframe -— 
<div class="g-btmbar”>... </div 文档 主体 
body 

html» 


注意 事项 : 


e <!DOCTYPE html» 必须 首 行 定格 
e <title> 为 文档 标题 
e «meta charset="utf-8"> 文档 解码 格式 
e <meta name="keywords" content="..."> 和 <meta 
name="description" content="..."> 提供 给 搜索 引擎 使 用 
e «meta name="viewport" content="width=device-width, initial- 
scale-1.0"» 移动 端 浏览 器 的 宽 高 与 缩放 
<link> 标签 可 以 引入 favicon 和 样式 表 CSS 文件 
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e HTML 语法 
o 全 局 属性 


HTML 语法 


<!-- 登录 窗口 --> 
" MEN <> 
<div class= m-win > 
<form class-"m-login" action="#”> z A 
Aa 


<fieldset> 
《legend> 网 易 通 行 证 登录 </legend> 一 个 或 多 个 属性 值 


<input type= "text”value= "帐号 ”> 

HE 
<input type="text” value=” 密码 ”> HX 
<button type="submit” class="u-btn”>@3t</but ton> 
. dee c 
fieldset> 


form> 


</div> 
书写 规范 : 


e 小 写 标签 和 属性 
e 属性 值 双 引 号 


e {X4 E dz Ia at 


全 局 属性 


e id, «div id-'unique-element'»«/div» ， 页 面 中 唯一 

e class， «button class='btn'>Click Me</button> ， 页 面 中 可 重复 出 现 
e style’ /& € i& $5, 

e title， 对 于 元 素 的 描述 类 似 于 Tooltip 的 效果 。 
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e HTML 标签 
o 文本 标签 
o 组 合 内 容 标签 
o RA 
m 热点 区 域 标签 
o 表格 
o 表单 
o 语义 化 


HTML 25 & 


HTML5 标签 集合 


文本 级 别 语义 
组 合 内 容 





文档 章节 


«body» 页 面 内 容 <header> 文档 头 部 «nav» 导航 «aside» 侧 边 栏 
«article» 定义 外 部 内 容 〈 如 外 部 引用 的 文章 ) | «section» 一 个 独立 的 块 
<footer> 尾部 





文本 标签 
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<l-- HEURES --> 

«a href="http://sample-link.com" title="Sample Link">Sample</a> 
<!-- 当前 窗口 显示 --> 

«a href="http://sample-link.com" title="Sample Link" target-" se 
1f">Sample</a> 

ACE e RENT ERES 

«a href="http://sample-link.com" title="Sample Link" target-" bl 
ank">Sample</a> 

<!-- iframe 中 打开 链接 --> 

<a href="http://sample-link.com" title="Sample Link" target="ifr 
ame -name">Sample</a> 

«iframe name="iframe-name" frameborder="0"></iframe> 


<1-- 页 面 中 的 锚 点 --> 
<a href="#achor">Achor Point</a> 
<section id="achor">Achor Content</section> 


«1-- MPAA VD --> 

«a href="mailto:sample-address@me.com" title="Email">Contact Us</ 
a> 

<!-- 多 个 邮箱 地 址 --> 

«a href="mailto:sample-address@me.com, sample-addressOQme.com" t 

itle="Email">Contact Us</a> 

<!-- 添加 抄 送 ， 主 题 和 内 容 --> 

«a hrefz'"mailto:sample-addressQme.com?cc-adminQme.com&subject-He 

lp&body=sample-body-text" title="Email">Contact Us</a> 


<!-- 电话 示例 --> 
«a href="tel:99999999" title="Phone">Ring Us</a> 


国有 各 


组 合 内 容 标签 


e <div> 
e <p> 

e <ol> 
e <ul> 
e <dl> 
e «pre» 
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e <blockquote> 


文档 章节 


«body» 页 面 内 容 <header> 文档 头 部 «nav» 导航 «aside» 侧 边 栏 
«article» 定义 外 部 内 容 (如 外 部 引用 的 文章 ) | «section» 一 个 独立 的 块 
<footer> 尾部 


引用 


e <cite> 引用 作品 的 名 字 、 作 者 的 名 字 等 

e <q> 引用 一 小 段 文字 (大 段 文字 引用 用 «blockquote» ) 
e «blockquote» 引用 大 块 文字 

e «pre» 保存 格式 化 的 内 容 (其 空格 、 换 行 等 格式 不 会 丢失 ) 


<pre> 
<code> 
int main(void) ( 
printf('Hello, world!'); 
return 0; 


} 


</code> 
</pre> 


代码 

<code> 引用 代码 
格式 化 

«b» 加 粗 «i» HA 
强调 


«em» 斜体 。 着 重 于 强调 内 容 ， 会 改变 语义 的 强调 <strong> 粗 体 。 着 重 于 强调 
内 容 的 重要 性 


«br» 换行 


Al 


无 序列 表 


<ul> 
«li»4 34 </li> 
<li>##</1i> 
</ul> 


有 序列 表 


<OL> 
siis 409 
<li- -</li> 
«/ol» 


自 定 义 列 表 


«dl» 
<dt> 作 者 </dt> 
<dd> 爱 因 斯 坦 </dd> 
<dt> 作 品 </dt> 
<dd>《 相 对 论 》</dd> 
<dd>《 时 间 与 空间 》</dd> 
«/dl» 


一 个 «dt» 可 以 对 应 多 个 «dd» 


NOTE: <dl> 为 自 定义 列表 ， 其 中 包含 一 
«dd» ， 并 且 dt 5 dl weer 宿 进 的 效果 。 <pre> 
常 与 <code> 一 同 使 用 。 


个 或 多 个 ESSE 及 一 个 或 多 个 


会 保留 换行 和 空 


EEG 


HTML 标签 


«pre» 
<code> 
int main(void) { 
printf('Hello, world!'); 
return 0; 
} 
</code> 
</pre> 


<blockquote> 拥有 cite 属性 ， 它 包含 引用 文本 的 出 处 ， 示 例如 下 所 示 : 


«blockquote cite="http://example.com/facts"> 
<p>Sample Quote...</p> 
</blockquote> 


«iframe src=""></iframe> 页 面 操作 可 以 不 影响 到 iframe 的 内 容 


<!--object embed 通 常用 来 底 入 外 部 资源 --> 

«object type="application/x-shockwave-player'"> 
«param name="movie" value="book.pdf"> 

</object> 


<1- -视频 track 可 以 引入 字幕 autoplay 可 以 使 视频 加 载 后 自动 播放 ，10oop 可 以 使 
其 循环 播放 - -> 
«video autoplay loop controls="controls" poster="poster.jpg"> 
<source src="movie.mp4" type="video/mp4"> 
<source src="movie.webm" type="video/webm"> 
<source src="movie.ogg" type="video/ogg"> 
«track kind="Subtitles" src="video.vtt" srclang="cn" label="cn" 
> 


</video> 


SS i 
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canvas 基于 像素 ， 性 能 要 求 比 较 高 ， 可 用 于 实时 数据 展示 。 svg 为 矢量 图 形 
图 像 。 


热点 区 域 标签 


img 中 套用 map 以 及 area 可 以 实现 点 击 某 部 分 图 片 触发 一 个 链接 ， 点 击 另 一 
部 分 触发 另 一 个 链接 


«img src="mama.jpg" width=100 height-100 usemap="#map" /> 
«map name="map"> 
«area shap="rect" coords="0,0,50,50" hrefz"" alt=""> 
«area shap="circle" coords="75,75,25" hrefz"" alt=""> 
</map> 


表格 
表格 代码 示例 


«table» 
<caption>table title and/or explanatory text</caption> 
<thead> 

<tr 
<th>header</th> 
</tr> 
</thead> 
<tbody> 
<r> 
<td>data</td> 
</tr> 
</tbody> 
</table> 


使 用 colspan=val 进行 跨 列 ， 使 用 rowspan=val 进行 跨行 。 


表单 


«form action-"WebCreation submit" method="get" accept-charset="u 
tf-8"> 
<fieldset> 

<legend>title or explanatory caption</legend> 

<1-- 第 一 种 添加 标签 的 方法 --> 

<label><input type="text/submit/hidden/button/etc" name="" v 
alue=""></label> 

«1-- 第 三 种 添加 标签 的 方法 --> 

«label for="input-id">Sample Label</label> 

<input type="text" id="input-id"> 


</fieldset> 

<fieldset> 
<legend>title or explanatory caption</legend> 
SS oou 


<input type="text" readonly> 
<!-- 隐藏 文本 框 ， 可 提交 影 藏 数据 --> 
<input type="text" name="hidden-info" value="hiden-info-valu 
e" hidden> 
</fieldset> 
«button type="Submit">Submit</button> 
<button type="reset">Reset</button> 
</form> 


使 用 fieldset 可 用 于 对 表单 进行 分 区 


表单 中 的 其 他 控件 类 型 : 


e textarea (文本 框 ) 
e select 与 option (下 拉 菜 单 可 多 选 ) 


Value 
button 


checkbox 
© color 


Ei date 
E datetime 


Ei datetime- 
local 


E email 
file 
hidden 
image 

E month 
E number 


password 


radio 


E range 


reset 


Ei search 


submit 


E tel 


text 


E time 
E url 
E week 


input 类 型 支持 值 列 表 
Description 


Defines a clickable button (mostly used with a JavaScript to 
activate a script) 


Defines a checkbox 
Defines a color picker 
Defines a date control (year, month and day (no time)) 


The input type datetime has been removed from the HTML 
standard. Use datetime-local instead. 


Defines a date and time control (year, month, day, hour, 
minute, second, and fraction of a second (no time zone) 


Defines a field for an e-mail address 


Defines a file-select field and a "Browse..." button (for file 
uploads) 


Defines a hidden input field 

Defines an image as the submit button 

Defines a month and year control (no time zone) 
Defines a field for entering a number 

Defines a password field (characters are masked) 
Defines a radio button 


Defines a control for entering a number whose exact value is 
not important (like a slider control) 


Defines a reset button (resets all form values to default 
values) 


Defines a text field for entering a search string 
Defines a submit button 
Defines a field for entering a telephone number 


Default. Defines a single-line text field (default width is 20 
characters) 


Defines a control for entering a time (no time zone) 
Defines a field for entering a URL 


Defines a week and year control (no time zone) 


语义 化 


i& 316 (Semantic Tag) 是 指 用 合适 的 标签 标识 适当 的 内 容 ， 它 可 以 起 到 搜索 引擎 
优化 (Search Engine Optimization) ， 提 高 可 访问 性 (例如 盲人 使 用 的 屏幕 阅读 
F) ， 与 此 同时 还 可 以 提高 代码 的 可 读 性 。 简 而 言 之 也 就 是 在 正确 的 地 方 使 用 正确 


的 标签 
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e XA 


实体 字符 


实体 字符 (ASCII Encoding Reference) 是 用 来 在 代码 中 以 实体 代替 与 HTML 语 法 
相同 的 字符 ， 避 免 浏览 解析 错误 。 它 的 两 种 表示 方式 ， 第 一 种 为 & 外 加 实体 字符 
名 称 ， 例 如 &nbsp; ， 第 二 种 为 & 加 实体 字符 序号 ， 例 如 &#160; ° 


常用 HTML 字 符 实 体 (建议 使 用 实体 ) 


字符 名 称 实体 名 实体 数 
双 引 号 &quot; &#34; 
& & 符 &amp; 83638; 
< 左 尖 括号 (小 于 号 ) &lt; &#60; 
> 右 尖 括号 (大 于 号 ) &gt; &#62; 
空格 &nbsp; &#160; 
中 文 全 角 空 格 &amp; 81112288; 
常用 特殊 字符 实体 〈 不 建议 使 用 实体 ) 
字符 名 称 实体 名 实体 数 

¥ 元 &yen; &#165; 
| 断 坚 线 &brvbar; &#166; 
© 版 权 &copy; &#169; 
® 注册 商标 民 &reg; 811174; 
TM 商标 TM &trade; &#8482; 

间隔 符 &middot; &#183; 
« 左 双 作 括号 &laquo; &#171; 
» BORGES &raquo; &#187; 
° 度 &deg; 811176; 
x R &times; &#215; 
+ 除 &divide; &#247; 


%o FH He &permil; &#8240; 


NOTE : 具体 所 需 可 在 使 用 时 查询 ， 无 需 记 忆 。 
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。 浏 览 器 兼容 


浏览 器 兼容 


主流 浏览 器 都 兼容 HTML5 的 新 标签 ， 对 于 IES 及 以 下 版 本 不 认识 HTML5 的 新 元 
素 ， 可 以 使 用 JavaScript 创建 一 个 没 用 的 元 素来 解决 ， 例 如 : 


«script» 
document.createElement ("header"); 
«/script» 


也 可 以 使 用 shiv 来 解决 兼容 性 问题 ， 详 情 可 参考 HTMLS Shiv 
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e CSS 


o 简介 


CSS 
简介 
CSS (Cascading Stylesheet) 它 用 于 设置 页 面 的 表现 。CSS3 并 不 是 一 个 完整 的 独 
立 版 本 而 是 将 不 同 的 功能 拆 分 成 独立 模块 〈 例 如 ， 选 择 器 模块 ， 盒 模型 模块 ) ， 这 


有 利于 不 同 功能 的 及 时 更 新 与 发 布 也 利于 浏览 器 厂商 的 实习 。 


2007 CSS2.1 









1998 CSS2 







2001 CSS3 


1996 CSS1 


CSS 引入 方法 


// 外 部 样式 表 
<head> 

<link rel="stylesheet" type="text/css" href="style.css"> 
</head> 


// 内 部 样式 表 
<head> 
«style type="text/css"> 
pt 
margin: 10px; 
} 
</style> 
</head> 


// AREA (TEASA PA Javascript 一 同 使 用 ) 
<p style="color: red">Sample Text</p> 


CSS 
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e 语法 

o 浏览 器 私有 属性 
o 属性 值 语法 

m 基本 元 素 

" 组 合 符 号 

m 数量 符号 
o @ 规 则 语法 

m (9 N 


语法 


EE A 

.m-userlist ( 

/* 属性 声明 */ 
Margin: 6 oO 2Opx; 
/* 属性 名 :属性 值 ; */ 

} 

.m-userlist .list { 
position: relative; 
height: 100px; 
overflow: hidden; 


浏览 器 私有 属性 


e Google Chrome, Safari ( -webkit ) 
e Firefox ( -moz- ) 


e IE( -ms- ) 
e Opera( -o- ) 
pic { 


-webkit-transform: rotate(-3deg); 
-ms-transform: rotate(-3deg); 
transform: rotate(-3deg); 


NOTE: 使 用 http://pleeease.io/play/ > CSS 预 处 理 器 (Sass > Less > Stylus) 或 编 
辑 器 插件 可 自动 添加 浏览 器 厂商 的 私有 属性 前 级 。 


属性 值 语 法 


margin: [ «length» | «percentage» | auto ]{1,4} 
/* 基本 元 素 : «length», «percentage», auto*/ 
ke ps7 

/* 数量 符号 : {1,4} */ 


o «length» 
o «percentage» 
o «color» 
O ... 

e 其 他 类 型 
o <' padding-width > 
o «'color-stop'» 


e inherit, initial 
组 合 符号 


e <'font-size'> <'font-family'> ( 两 项 必 存 ， 顺 序 毕 遵 ) 
o 合法 : 12px arial 


数 


o 不 合法 : 2em 

o 不 合法 : arial 14px 

<length>&&<color> ( && 两 项 必 存 ， 顺 序 无 碍 ) 

o 合法 : green 2px 

o 合法 : 1em orange 

o 不 合法 : blue 

underline || overline || line-through || blink ( || 
顺序 无 碍 ) 

o 合法 : underline 

o 合法 : overline underline 

«color» | transparent ( | 只 可 选 一 ， 不 可 共存 ) 

o 合法 : orange 

o 合法 :transparent 

o 不 合法 : orange transparent 

bold [thin || «length»] ( [] 分 组 之 用 ， 视 为 整体 ) 

o 合法 : bold thin 

o 合法 : bold 2em 


Bkk 2 


Xd. 


«length» (无 则 表示 仅 可 出 现 一 次 ) 

o 合法 : 1px 

o 合法 : 10em 

o 不 合法 : 1px 2px 

<color-stop>[, <color-stop>]+ (+ 可 出 现 一 次 或 多 次 ) 
o 合法 : #fff, red 

o 合法 : blue, green 50%, gray 

o 不 合法 : red 

inset?&&«color» (? 表示 可 选 ) 

o 合法 : inset orange 

o 合法 : red 

<length>{2,4} ( (2,4) 可 出 现 次 数 和 最 少 最 多 出 现 次 数 ) 
o 合法 : 1px 2px 

o 合法 : 1px 2px 3px 

o 不 合法 : 1px 

o 不 合法 : 1px 2px 3px 4px 5px 


至 少 选 一 ， 


e <time>[, «time»]* ( * 出 现 0 次 或 多 次 ) 
o 合法 : 1s 
o 合法 : 1s,4ms 
e <time># ( & 出 现 一 次 或 者 多 次 ， 用 ， 分 隔 ) 
o 合法 : 2s, 4s 
o 不 合法 : 1s 2s 


CSS 规则 示例 


padding-top: <length>|<percentage> 
padding-top:1px; 
padding-top:lem 5%; 

border-width:[<length> | thick | medium | thin ](1,4) 
border-width:2px; 
border-width:2px small; 

box-shadow: [ inset? && [ «length» (2,4) && «color»? ] ]*|none 
box-shadow:3px 3px rgb(50%, 50%, 5096), red 0 0 4px inset; 
box-shadow:inset 2px 4px, 2px blue; 


@ 规 则 语法 


Qimport "subs.css"; 
Qcharset "utf-8"; 
Qmedia print ( 

/* property: value */ 
} 
@keyframes fadein { 

/* property: value */ 
} 


e  @ 标 示 符 AB; 
。 @ 标 示 符 RE 
@ 规 则 
常用 的 规则 


e @media (用 于 响应 式 布局 ) 


e @keyframes (CSS 动画 的 中 间 步 骤 ) 
e @font-face (引入 外 部 字体 ) 


其 他 规则 (不 常用 ) 


e Qimport 

e Qcharset 

e Qnamespace 
e (page 

e @supports 
e (document 
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See the Pen FEND Selectors by Li Xinyang (@li-xinyang) on CodePen. 


选择 器 可 被 看 做 表达 式 ， 通 过 它 可 以 选择 相应 的 元 素 并 应 用 不 同 的 样式 。 


S wa 


ang 


«div» 
<p>Sample Paragraph</p> 
<p>Sample Paragraph</p> 
<p>Sample Paragraph</p> 
</div> 


<style type="text/css"> 
pt 


color: blue; 


} 
</style> 


类 选择 器 


E: 


.className 以 开头， 名 称 可 包含 字母 ， 数 字 ， -> ， 但 必须 以 字母 开 
头 。 它 区 分 大 小 写 并 可 出 现 多 次 。 


<div> 
<p>Sample Paragraph</p> 
«p class-"special bold">Sample Paragraph</p> 
<p>Sample Paragraph</p> 

</div> 


«style type="text/css"> 


p { 
color: blue 
} 
.special { 
color: orange; 
} 
.bold { 
font-weight: bold; 
} 
</style> 


D 


id 选择 器 


#idName 以 # 开头 且 只 可 出 现 一 次 ， 其 命名 要 求 于 .className 相同 。 


<div> 
<p id="special">Sample Paragraph</p> 
</div> 


<style type="text/css"> 


#special { 
color: red; 
} 
</style> 
通配符 选择 器 
<div> 


<p>Sample Paragraph</p> 
<p>Sample Paragraph</p> 
</div> 


<style type="text/css"> 
dE 
color: blue; 


j 
</style> 


属性 选择 器 


[attr] 或 [attr=val] 来 选择 相应 的 元 素 。#nav{...} 既 等 同 于 
[id=nav]{...} ° lE7+ 


[attr~=val] 可 选用 与 选择 包含 val 属性 值 的 元 素 ， 像 class="title 
sports" 与 class="sports" ° .sports{...} 既 等 同 于 [class--sports] 
1E7+ 


[attr|=val] 可 以 选择 val 开头 及 开头 紧 接 - 的 属性 值 。|IE7+ 


[attrA=val] 可 选择 以 val 开头 的 属性 值 对 应 的 元 素 ， 如 果 值 为 符号 或 空格 则 
需要 使 用 引号 "" o |ET+ 


[attr$=val] 可 选择 以 val 结尾 的 属性 值 对 应 的 元 素 。|IE7+ 


[attr*-val] 可 选择 以 包含 val 属性 值 对 应 的 元 素 。|E7+ 


<div> 
<form action=""> 
<input type="text" value="Xinyang" disabled» 
<input type="password" placeholder="Password"> 
<input type="button" value="Button"> 
</form> 
</div> 
<style type="text/css"> 
[disabled] { 
background-color: orange; 
} 
[type=button] { 
color: blue; 


} 
</style> 
伪 类 选择 器 
常用 伪 类 选择 器 


e :link IE6+ 

e ‘visited IE7+ 

e :hover IE6 中 仅 可 用 于 链接 

e :active IE6/7 中 仅 可 用 于 链接 

e :enabled IEQ9+ 

e :disabled IE9+ 

e :checked 1IE9+ 

e :first-child IE8+ 

e :last-child IE9+ 

e :nth-child(even) TA odd even 或 数字 IE9+ 
e :nth-last-child(n) n 从 0 开始 计算 1E9+ 
e :only-child 仅 选 择 唯一 的 元 素 IEQ+ 

e :only-of-type IE9+ 

e :first-of-type IE9+ 

e :last-of-type IE9+ 

e :nth-of-type(even) IE9+ 


e :nth-last-of-type(2n) IE9- 
不 常用 伪 类 选择 器 : 


e :empty 选中 页 面 中 无 子 元 素 的 标签 IE9+ 

e :root 选择 HTML JR4& 4 IEQ+ 

e :not() 参数 为 一 般 选 择 器 IE9+ 

e :target 被 锚 点 选中 的 目标 元 素 IEQ+ 

e :lang() 选中 语言 值 为 某 类 特殊 值 的 元 素 |E7+ 


NOTE: element:nth-of-type(n) 指 父 元 素 下 第 n 个 element 元 
** element:nth-child(n) 指 父 元 素 下 第 n 个 元 素 且 元 素 为 element » #7 
是 ， 选 择 失 败 。 具 体 细节 请 在 使 用 时 查找 文档 。 


<div> 
«a href="http://sample-site.com" title="Sample Site">Sample Si 
te</a> 


</div> 
<style type="text/css"> 
/* 伪 类 属性 定义 有 顺序 要 求 ! */ 
a:link { 
color: gray; 
} 


a:visited { 
color:red; 


a:hover { 
color: green; 
M> kumeak es 


a:active { 
color: orange; 
J Es t 


注意 与 伪 类 学 则 器 的 区 分 


e ::first-letter IE6+ 

e ::first-line IE6+ 

e ::before{content: "before") 4-4 content 一 同 使 用 |E8+ 

e ::after(content: "after") X4 content 一 同 使 用 |E8+ 

e ::selection 被 用 户 选中 的 内 容 〈 和 鼠标 选择 高 亮 属性 ) IE9+ Firefox M 

moz 前 组 

组 合 选择 器 

e 后 代 选 择 器 main h2 (...) ， 使 用 “表示 1E6+ 

e 子 选 择 器 .main>h2 (...) ， 使 用 > 表示 |E7+ 

e 兄弟 选择 器 h2tp {...} ， 使 用 + 表示 IET 

o h2-p {...} ， 使 用 ~ 表示 (此 标签 无 需 紧 邻 ) IET 

选择 器 分 组 


<style type="text/css"> 


come it Ye npo y zh- * 
/* 下 面 两 组 样式 声明 效果 一 致 */ 


hi {color: red;} 

h2 {color: red; 

h3 (color: red;j 

hi n2 -ns'(colpr: reds} 
</style> 


继承 、 优 先 、 


继承 


子 元 素 继承 父 元 


inherited: y 


层级 


素 的 样式 ， 但 并 不 是 所 有 属性 都 是 默认 继承 的 。 


es 来 判断 属性 是 否 可 以 自动 继承 。 


通过 文档 中 的 


Initial value Varies from one browser to another 


Applies to all elements. It also applies to ::first-letter and ::first-line. 
Inherited yes 
Media visual 


Computed value If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() 
corresponding one. The transparent keyword maps to rgba(0,0,0,0). 


Animatable yes, as a color 


Canonical order the unique non-ambiguous order defined by the formal grammar 


自动 继承 属性 : 


e Color 
e font 


text-align 


list-style 


非 继承 属性 : 


e background 
border 
position 


KH 


CSS Specificity Calculator 可 以 在 这 里 找到 。 更 多 关于 CSS 优先 级 别 的 信息 可 以 
在 这 里 找到 (EX) 


计算 方法 : 


、 伪 类 的 属性 选择 器 的 数量 
选择 ae 


NOTE : 从 上 到 下 优先 级 一 次 降低 ， 且 优先 级 高 的 样式 会 将 优先 级 低 的 样式 覆盖 。 
大 致 公式 (并 不 准确 ) 如 下 。 


value = a * 1000 + b * 100 + c * 10 +d 


改变 优先 级 
e 改变 样式 声明 先后 顺序 
e 提升 选择 器 优先 级 
e !important (惯用 ) 
E 


层 司 为 相同 属性 根据 优先 级 覆盖 ， 如 优先 级 相同 则 后 面 会 覆盖 前 面 的 属性 ， 而 不 同 
属性 则 会 合并 。 
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文本 
See the Pen FEND Fonts by Li Xinyang (@li-xinyang) on CodePen. 
字体 


改变 字号 


font-size: «absolute-size» | «relative-size» | «length» | 
«percentage» | inherit 


e «absolute-size» ^j small large medium 


e <relative-size> 有 smaller larger 


div 

font-size 12px 

pZsampleO 
font-size 16px 

pZsamplei 
font-size 2em 

p#sample2 
font-size 200% 


NOTE : 以 上 两 值 在 开发 中 并 不 常用 。 2em 4 200% 都 为 父 元 素 默 认 大 小 的 两 
倍 (参照 物 为 父 元 素 的 字体 大 小 12px ) 。 

改变 字体 

font-family: [ «family-name» | «generic-family» ]£ 
«generic-family» 可 选 选项 ， 但 具体 使 用 字体 由 浏览 器 决定 


e Serif 
e Sans-serif 
cursive 


fantasy 


monospace 


font-family: arial, Verdana, sans-serif; 


NOTE : 优先 使 用 靠 前 的 字体 


加 粗 字 体 


font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 
400 | 500 | 600 | 700 | 800 | 900 


font-weight: normal; 
font-weight: bold; 


倾斜 字体 


font-style: normal | italic | oblique | inherit 

italic 使 用 字体 中 的 斜体 ， 而 oblique 在 没有 斜体 字体 时 强制 倾斜 字体 。 
更 改行 距 

line-height: normal | «number» | «length» | «percentage» 


normal 值 为 浏览 器 决定 ， 在 1.1 至 1.2 之 间 (通常 设置 值 为 1.14 左 右 ) 


/* length R# */ 
line-height: 40px; 
line-height: 3em; 
/* percentage 类 型 
line-height: 300%; 
/* number XÆ */ 


line-height: 3; 


NOTE: 4 line-height 为 number 类 型 时 ， 子 类 直接 继承 其 数值 (不 计算 直 
接 继承 ) 。 而 当 为 ”percentage 类 型 时 ， 子 类 则 会 先 计算 再 显示 〈 先 计算 后 继 
A) © 


字 间 距 (字母 间距 ) 
letter-spacing: normal | <length> 


其 用 于 设置 字 间 距 或 者 字母 间距 ， 此 属性 适用 于 中 文 或 西 文中 的 字母 。 如 果 需 要 设 
置 西 文中 词 与 词 的 间距 或 标签 直接 的 距离 则 需要 使 用 word-spacing ° 


word-spacing: normal | «length» 


font shorthand 


font: [ [ «'font-style'» || «font-variant-css21» || <‘font-weight’> 
|| <‘font-stretch’> ]? «'font-size'» [ / «'line-height'» ]? «'font- 
family’> ] | caption | icon | menu | message-box | small-caption | 
status-bar 


font: 30px/2 "Consolas", monospace; 
font: italic bold 20px/1.5 arial, serif; 
font: 20px arial, serif; 


NOTE : 当 其 他 值 为 空 时 ， 均 被 设置 为 默认 值 。 


改变 文字 颜色 


color: «color» 


element { color: red; } 

element { color: #f00; } 

element { color: #ff0000; } 

element { color: rgb(255,0,0); } 
element { color: rgb(100%, 0%, 0%); } 
element { color: hsl(0, 100%, 50%); } 


/* 50% translucent */ 
element { color: rgba(255, 0, 0, 0.5); } 
element { color: hsla(0, 100%, 50%, 0.5); } 


jia eaa 2 
element { color: transparent' } 
element { color: rgba(0, ©, 0, 0); ) 


对 齐 方式 
文字 居中 


text-align: start | end | left | right | center | justify | match- 
parent | start end 


NOTE : 默认 为 文本 左 对 齐 。 
LA B xt GE 


vertical-align: baseline | sub | super | text-top | text-bottom | 
middle | top | bottom | <percentage> | <length> 


NOTE: «percentage» 的 参照 物 为 line-height 


文本 缩 进 


mj 


text-indent: «length» | «percentage» && [ hanging || each-line ] 


NOTE : 缩 进 两 个 字 可 使 用 text-indent: 2em; 


格式 处 理 
保留 空格 格式 
white-space: normal | pre | nowrap | pre-wrap | pre-line 


pre 行为 同 «pre» 一 致 。 


New lines Spaces and tabs Text wrapping 
normal Collapse Collapse Wrap 
nowrap Collapse Collapse No wrap 
pre Preserve Preserve No wrap 
pre-wrap Preserve Preserve Wrap 
pre-line Preserve Collapse Wrap 


文字 换行 

word-wrap: normal | break-word 

NOTE : 允许 长 单词 自动 换行 。 

word-break: normal | break-all | keep-all 


NOTE: break-all 单词 中 的 任意 字母 间 都 可 以 换行 。 


文本 装饰 


text-shadow:none | <shadow-t># 或 text-shadow:none 
{2,3}&&<color>? ]# 


[<length> 


pt 
text-shadow: 1px 1px 1px #000, 
3px 3px 5px blue; 


1. value = The X-coordinate X 轴 偏 移 像 素 
2. value = The Y-coordinate Y 轴 偏 移 像素 
3. value = The blur radius 阴影 模糊 半径 


4. value = The color of the shadow 阴影 颜色 (默认 为 文字 颜色 ) 


文本 装饰 《下 划 线 等 ) 


text-decoration: «'text-decoration-line'» || «'text-decoration- 
style'» || <'text-decoration-color'> 
hi.under { 
text-decoration: underline; 
} 
hi.over { 
text-decoration: overline; 
} 
p.line { 
text-decoration: line-through; 
} 
p.blink ( 
text-decoration: blink; 
} 
a.none ( 
text-decoration: none; 
n 


p.underover ( 
text-decoration: underline overline; 


高 级 设置 
省 略 字符 


text-overflow: [ clip | ellipsis | <string> ]{1,2} 


TE HS E 
text-overflow: ellipsis; 
overflow: hidden; /* 溢出 截取 





white-space: nowrap; /* 


更 换 鼠 标 形 状 


cursor: [[«funciri»,]* [ auto | crosshair | default | pointer | 


move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw- 


resize | s-resize | w-resize| text | wait | help ]] | inherit 


常用 属性 


cursor: [«uri»,]*[auto | default | none | help | pointer | zoom-in 


| zoom-out | move] 


«uri» 图 片 资 源 地 址 代替 和 鼠标 默认 形状 
«default» 默认 光标 

<none> 隐藏 光标 

«pointer» 手 型 光标 

«zoom-in» 

«zoom-out» 


«move» 


cursor: pointer; 


cursor: url(image-name.c 


ur), pointer; 


202. 


ur 


强制 继承 


inherit 会 强制 继承 父 元 素 的 属性 值 。 


font-size: inherit; 


font-family: inherit; 


font-weight: inherit; 


word-wrap: inherit; 


work-break: inherit 


text-showdow: inherit 


NOTE : 具体 在 使 用 时 可 查询 文档 
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o 属性 
m width 
m height 
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m margin 

= margin 合并 

m border 
m border-radius 
m overflow 
m box-sizing 
m box-shadow 
m outline 

o TRBL 


o 值 缩写 


金 模型 
金子 模型 是 网 页 布局 的 基石 。 它 有 边框 、 外 边 距 、 内 边 距 、 内 容 组 成 。 


盒子 3D 模型 


THE CSS BOX MODEL HIERACHY 





border 





| padding* 


background-image 





background-color 
margin* 


* transparent elements 


盒子 由 上 到 下 依次 分 为 五 层 ， 它 们 自 上 而 下 的 顺序 是 。 


. border 边框 
. content + padding A R5 A ib $E 
. background-image #7 X El A 

e 


. background-color 背景 颜色 
. margin 732 $E 


O A O N > 


See the Pen FEND 003 BoxModel by Li Xinyang (@li-xinyang) on CodePen. 


属性 


盒子 填充 


盒子 内 容 
盒子 外 边 距 





每 个 盒子 都 有 : 边 距 、 边 框 、 填 充 、 内 容 四 个 属性 


border、padding、margin 都 有 top、right、bottom、left 四 部 分 
每 个 属性 都 有 : 上 、 下 、 左 、 右 四 部 分 


width 


ARETE 


91 


— 


SH 


width: «length» | «percentage» | auto | inherit 


NOTE: 通常 情况 下 百分比 得 参照 物 为 元 素 的 父 元 素 。 max-width 4 min- 
width 可 以 设置 最 大 与 最 小 宽度 。 


height 

内 容 金 子 高 

height: «length» | «percentage» | auto | inherit 

NOTE: 默认 情况 元 素 的 高 度 为 内 容 高 度 。 max-height 4 min-height 可 以 


设置 最 大 与 最 小 高 度 。 


padding 





padding: [<length> | <percentage>]{1,4} | inherit 


margin 


margin: 20px 





margin: [<length> | <percentage> | auto]{1,4} | inherit 


NOTE: margin 默认 值 为 auto 











Trick : 


PP AEP SSE v 
margin: © auto; 


margin 合并 


margin-bottom: 40px; 


margin-bottom: 20px; 
g | 


margin-top: 20px 





紫 邻 元 素 父 元 素 与 第 一 个 /最 后 一 个 子 元 素 


毗邻 元 素 外 间距 (margin) 会 合并 ， 既 取 相 对 较 大 的 值 。 父 元 素 与 第 一 个 和 最 后 一 
个 子 元 素 的 外 间距 也 可 合并 。 


border 


border: 1px dashed blue 





border: [<br-width> || <br-style> || <color>] | inherit 
border-width: [<length> | thin | medium | thick]{1,4} | inherit 
border-style: [solid | dashed | dotted | ...]{1,4} linherit 


border-colro: [«color» | transparent]{1,4} | inherit 
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NOTE: border-color RUA AK FARE o 


border-radius 


border-radius: 
Opx 5px 10px 15px/ 
20px 15px 10px 5px; 


border-radius: 10px; 





/* 水 平 半 径 / 重 直 半 径 */ 
border-radius: [ «length» | «percentage» ]{1,4} [ / [ «length» | 
«percentage» ]{1,4} ]? 


NOTE : 四 个 角 的 分 解 属性 由 左上 角 顺 时 针 附 值 。 


overflow 
CSS2.1 introduced CSS2.1 introduced CSS2.1 introduced ^ CSS2.1 introduced ~ 

the overflow property, the overflow property, the overflow property the overflow property, 
which allows authors to which allows authors to which allows authors to 
h aig 1 : | 
E overflow: visible à | overflow: hidden i overflow: scroll | overflow: auto 
it is no longer an itis no longer an which meansitisno — 
authoring error. It also authoring error. It also . longer an authoring 
allows authors to specify allawe aithare ta cenecifu 3 i error Tt alen allawe % 
that overflow is handled 
by clipping. 


overflow: visible | hidden | scroll | auto 


NOTE: 默认 属性 为 visible 。 使 用 overflow-x 与 overflow-y 单独 的 设 
置 水 平和 垂直 方向 的 滚动 条 。 


box-sizing 
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border-box 


content-box 


width: 150px 
height: 150px 
padding: 50px 
border: 5px Solid blue 


box-sizing: content-box 


width: 150px 
height: 150px 
padding: 50px 


border: 5px solid blue 
box-sizing: border-box 





box-sizing: content-box | border-box | inherit 


e content-box = 内 容 盒子 宽 高 + 填充 ( Padding ) + 边框 宽 ( border- 
width ) 


e border-box = 内 容 盒 子 宽 高 


box-shadow 


box-shadow: 
3px 3px 5px 2px, 
inset Qpx Opx 5px red; 


box-shadow: 


box-shadow: 3px 3px 5px 2px; inset Opx Opx 5px red; 





外 阴影 内 阴影 多 阴影 
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box-shadown: none | [inset? && [ «offset-x» «offset-y» «blur- 
radius»? <spread-radius>? «color»? ] ]# 


box-shadow: 4px 6px 3px Opx red; 
| | | | 
水 平 偏 移 | | | 
垂直 偏 移 | | 
模糊 半径 | 
阴影 大 小 


NOTE : 水 平 与 垂直 偏 移 可 以 为 负 值 即 相 反方 向 偏 移 。 颜 色 默 认为 文字 颜色 。 阴 影 
不 占据 空间 ， 仅 为 修饰 效果 。 


outline 
outline: [ «'outline-color'» || «'outline-style'» || «'outline-w 
idth'» ] 
outline-width: «length» | thin | medium | thick | inherit 
outline-style: solid | dashed | dotted | ... | inherit 


outline-color: «color» | invert | inherit 
/* invert 与 当前 颜色 取 反 色 */ 


NOTE: outline 4 border 相似 但 无 法 分 别 设置 四 个 方向 的 属 
性 。 outline 并 不 占据 空间 ， 而 border 占据 空间 ， 且 显示 位 于 border 以 
外 。 


TRBL 









top-right 





bottom-left bottom-right 


TRBL (Top, Right, Bottom, Left) 即 为 顺 时 针 从 顶部 开始 。 具 有 四 个 方向 的 属性 都 可 
以 通过 *-top  *-right  *-bottom 与 *-left 单独 对 其 进行 设置 。 


下 面 的 值 缩写 以 padding 为 例 。 


对 面相 等 ， 后 者 省 略 ; 四 面相 等 ， 只 设 一 个 。 
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as 


padding: 
padding: 


Vas 


padding: 
padding: 


Vas 


padding: 
padding: 


四 面值 */ 
20px; 
20px 20px 20px 20px; 


上 下 值 右 左 值 */ 
20px 10px; 
20px 10px 20px 10px; 


.4ü 右 左 值 下 值 */ 
20px 10px 30px; 
20px 10px 30px 10px; 
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background-color 


background-color: <color> 
background-color: #f00; 

background-color: rgba(255, 0, 0, 0.5); 
background-color: transparent; /* 默认 值 */ 


background-image 


background-image: <bg-image>[, «bg-image»]* 

/* «bg-image» - «image» | none */ 

background-image: url("../image/pic.png"); 

background-image: url("../image/pic.png0O"), url("../image/pici.p 
ng"); 

/* 多 张 背 景 图 时 ， 先 引入 的 图 片 在 上 一 层 后 引入 则 在 下 一 层 */ 


NOTE: 4 background-color 与 background-image 共存 时 ， 背 景 颜色 永远 
在 最 底层 〈 于 背景 图 片 之 下 ) ° 
background-repeat 
background-repeat 需 与 背景 图 片 数量 一 致 。 
background-repeat: <repeat-style>[, «repeat-style]* 


«repeat-style» - repeat-x | repeat-y | [repeat | space | round | 
no-repeat]{1,2} 


ys X 轴 XC A d 


background-repeat: no-repeat repeat; 


e space 43K ded BAA EM CERRSBAqÀSBATSOaSXSR 
盖 显 示 区 域 的 宽 高 
e round 不 留 空隙 平 铺 且 履 盖 显示 区 域 ， 图 标 会 被 缩放 以 达到 履 盖 效果 (缩放 
不 一 定 等 比 ) 
background-attachment 
当 页 面 内 容 超过 显示 区 域 时 ， 使 用 local 使 背景 图 片 同 页 面 内 容 一 同 滚动 。 


background-attachment: <attachment>[, <attachment>]* 
<attachment> = scroll | fixed | local 


background-position 


background-position: <position>[, <position>]* 

«position» = [left|center|right|top|bottom|<percentage>|<length> 
]| [left] center|right|top|bottom|<percentage>|<length>] [left|cen 
ter|right|top|bottom|<percentage>|<length>] | [center |[left|rig 
ht] [<percentage>|<length>]?]&&[center |[left|right][<percentage> 
|<length>]?] 


/* 默认 位 置 为 */ 
background-position: 0 0; 


/* percentage 是 容器 与 图 片 的 百分比 重合 之 处 */ 
background-position: 20% 50%; 


/* FAAR */ 
background-position: 50% 50%; 
background-position: center center; 


background-position: 0 0; 
background-position: left top; 


background-position: 100% 100%; 
background-position: right bottom; 


/* 四 个 值 时 方向 只 为 参照 物 */ 
background-position: right 10px top 20px; 





20% 50% 


right 10px top 20px 


Sprite 的 使 用 


background-image: url(sprite.png) 
background-repeat: no-repeat; 
background-positon: O -100px 


使 用 位 置 为 负 值 将 图 片 偏 移 使 需要 的 图 片 位 置 上 移 并 显示 正确 的 图 案 。 
linear-gradient 


linear-gradient() 

[[<angle> | to «side-or-corner],]? <color-step>[, <color-stop>]+ 
«side-or-corner» - [left | right] || [top | bottom] 

«color-stop» = «color» [<percentage> | <length>]? 


background-image: linear-gradient(red, blue); 
background-image: linear-gradient(to top, red, blue); 
background-image: linear-gradient(to right bottom, red, blue); 
background-image: linear-gradient(Odeg, red, blue); 
background-image: linear-gradient(45deg, red, blue); 
background-image: linear-gradient(red, green, blue); 
background-image: linear-gradient(red, green 20%, blue); 


Y 


ae n 
月 OR 





(red, blue) 


(to top, red, blue) 





(to right bottom, red, blue) 






(Odeg, red, blue) 


1 


(45deg, red, blue) 





(red, green, blue) 





(red, green 2096, blue) 


radial-gradient 
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radial-gradient( [ circle || «length» ] [ at «position» ]? , | 
[ ellipse || [<length> | «percentage» ]{2}] [ at «position» ]|? 

, | [ [ circle | ellipse ] || <extent-keyword> ] [ at «position» 
]? , | at «position» , «color-stop» [ , <color-stop> ]+ ) 


<extent-keyword> = closest-corner | closest-side | farthest-corn 
er | farthest-side 
<color-stop> = «color» [ «percentage» | «length» ]? 


background-image: radial-gradient(cloest-side, red, blue); 
background-image: radial-gradient(circle, red, blue); 
background-image: radial-gradient(circle 100px, red, blue); 
background-image: radial-gradient(red, blue); 

background-image: radial-gradient(100px 50px, red, blue); 
background-image: radial-gradient(100px 50px at © 0, red, blue); 
background-image: radial-gradient(red, green 20%, blue); 


H 
| 


jo 


(cloest-side, red, blue) 


" 


(circle, red, blue) 





(circle 100px, red, blue) 





(red, blue 


(100px 50px, red, blue) 





(100px 50px at 0 0, red, blue) 


f 


(red, green 20%, blue) 
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repeat-*-gradient 


background-image: repeating-linear-gradient(red, blue 20px, 
40px); 
background-image: repeating-radial-gradient(red, blue 20px, 
40px); 





repeating-linear-gradient 





repeating-radial-gradient 


background-origin 


案例 模型 


red 


red 


决 


( em e em e». 0D OD 0D. 0D 0D DD 0D. 0D OD D. 0D OD. PED 0D OD. OD. 0D 0D. 0D. 0D 0D. 0D OD. 0D. 0D OD D. 0D OD 0D. 0D OD G5. 0D CD 0D. 0D OD. 


border-box 
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padding-box 


content-box 


 ————Á 


--mamGmmmmemGmGOmGumemOmGmOeDGDGOGDDODODODDDODMDDDMDDDDODADOOODDOooooonweo) 
AH x (0,0) 坐标 与 100% 坐标 的 区 域 。 默 认 值 为 padding-box 。 


<box>[, <box>]* 
<box> = border-box | padding-box | content-box 


background-image: url(red.png); 
background-repeat: no-repeat; 


background-origin: padding-box; 
background-origin: border-box; 
background-origin: content-box; 





gummi 
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padding-box 


padding-box 


| 
content-box 





border-box 





content-box 


background-clip 


裁剪 背景 ， 默 认 值 为 border-box ° 
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<box>[, <box>]* 
<box> = border-box | padding-box | content-box 


background-image: url(red.png); 
background-repeat: no-repeat; 


background-clip: border-box; 
background-clip: padding-box; 
background-clip: content-box; 





border-box 





padding-box 





content-box 


background-size 


<bg-size>[, <bg-size>]* 
<bg-size> = [<length> | <percentage> | auto] {1, 2} | cover 
ntain 


background-image: url(red.png); 
background-repeat: no-repeat; 
background-position: 50% 50%; 


background-size: auto; 

background-size: 20px 20px; 

/* % 参照 物 为 容器 */ 

background-size: 50% 5096; 

/* 尽 可 能 小 ， 但 宽度 与 高 度 不 小 过 容器 〈 充 满 容器 ) */ 
background-size: cover; 

/* 尽 可 能 大 ， 但 宽度 与 高 度 不 超过 容器 〈 最 大 完全 显示 ) */ 
background-size: contain; 





auto 


20px 20px 





50% 50% 





cover 





contain 
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background shorthand 


[xbg-layer,]* <final-bg-layer> 
<bg-layer> = <bg-image> || «position» [/ <bg-size>]? || <repeat- 
style> || <attachment> || <box> || <box> 


/* 两 个 «box» 第 一 个 为 background-origin */ 

/* 两 个 «box» 第 二 个 为 background-clip */ 

/* 只 出 现 一 个 «box» 则 即 是 background-origin 也 是 background-clip * 
/ 


<final-bg-layer> = <bg-layer> || <'background-color'> 


background: url(red.png) © 0/20px 20px no-repeat, url(blue.png) 
50% 50%/contain no-repeat content-box green; 
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Table of Contents generated with DocToc 


e 布局 

o display 
m display:block 
m display:inline 
m display:inline-block 
m display:none 

o position 
m position:relative 
m position:absolute 
m position:fixed 
m top/right/bottom/left 


m z-index 
m z-index 7X 
o float 
m Clear 
o flex 
m flex 方向 
m flex-direction 
m flex-wrap 
m flex-flow 
m order 
m flex 弹性 
m flex-basis 
m flex-grow 
m flex-shrink 
m flex 
a flex 对 齐 


m justify-content 
m align-items 

m align-self 

m align-content 


布局 
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学 习 布 局 前 须知 道 CSS 中 的 定位 机 制 。 


e 标准 文档 流 (Normal Flow) 
e 浮动 (Float) 
e 绝对 定位 (Absolute Positioning) 


标准 文档 流 ， 从 上 到 下 ， 从 左 到 右 的 输出 文档 内 容 。 它 由 块 级 (block) 元 素 和 行 级 
元 素 组 成 ， 且 它们 都 是 盒子 模型 。 


下 面 为 Firefox 布局 可 视 化 Gecko Reflow Visualisation， 布 局 是 指 浏览 器 将 元 素 
以 正确 的 大 小 摆 放 在 正确 的 位 置 上 。 


display 默认 宽度 可 设置 宽 高 起 始 位 置 
block 父 元 素 宽度 是 换行 
inline 内 容 宽 度 € 同行 
inline-block 内 容 宽 度 是 同行 
display:block 


e 换行 显示 


e 默认 为 block 的 元 素 : <div>, <p>, «hi» ~ <h6> , <ul> , «form» 


display:inline 


e 默认 宽度 为 内 容 宽 度 

e. 不 可 设置 宽 襄 

e 同行 显示 (元 素 内 部 可 换行 ) 

e 默认 为 inline 的 元 素 : «span» , <a> 


, «label» , «cite» , «em» 


display:inline-block 


e 默认 宽度 度 为 内 容 宽 度 


人 


@ "Tx à it E 


e 同行 显示 
e 整 块 换行 


e 默认 为 inline-block 的 元 素 : «input» , «textarea» , «select» , 


<button> 


display:none 

e 设置 元 素 不 显示 

display:none 与 visibility:hidden 的 区 别 为 display:none 不 显示 且 
不 占 位 ， 但 visibility:hidden 不 显示 但 占 位 。 

position 


position 用 于 设置 定位 的 方式 与 top right bottom left z-index 
则 用 于 设置 参照 物 位置 ( 必须 配合 定位 一 同 使 用 ) © 
三 种 定位 形式 

静态 定位 (static) 


e 相对 定位 (relative) 
e 绝对 定位 (absolute ` fixed) 


position: static | relative | absolute | fixed 
/* RIEA static 7 


布局 


position:relative 


e 相对 定位 的 元 素 仍 在 文档 流 之 中 ， 并 按照 文档 流 中 的 顺序 进行 排列 。 
e 参照 物 为 元 素 本 身 的 位 置 。 


NOTE : 最 常用 的 目的 为 改变 元 素 层 级 和 设置 为 绝对 定位 的 参照 物 。 


posifioa:relative; 


top:10px;lett: 20px 





position:absolute 
建立 以 包含 块 为 基准 的 定位 ， 其 随即 拥有 偏 移 属性 和 z-index 属性 。 


e 默认 宽度 为 内 容 宽 度 
e 脱离 文档 流 
e 参照 物 为 第 一 个 定位 祖先 或 根 元 素 ( «html» 元 素 ) 
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position:absolute; 


top:0;left:20px; 


position:absolute; 





position:fixed 


e 默认 宽度 为 内 容 宽 度 
。 脱离 文档 流 
e 参照 物 为 视窗 


NOTE : 宽 高 的 100% 的 参照 依然 为 视窗 ( 例 : 网 页 遮 单 效果 ) 
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top/right/bottom/left 


right 


top 
bottom 





二 
a 
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布局 
其 用 于 设置 元 素 边缘 与 参照 物 边 缘 的 距离 ， 且 设置 的 值 可 为 负 值 。 在 同时 设置 相对 
方向 时 ， 元 素 将 被 拉 伸 。 


z-index 


其 用 于 设置 Z 轴 上 得 排序 ， 黑 认 值 为 0 但 可 设置 为 负 值 。 (如 不 做 设置 ， 则 按照 广 
档 流 的 顺序 排列 。 后 面 的 元 素 将 置 于 前 面 的 元 素 之 上 ) 





z-index JX 


父 类 容器 的 z-index fT fX z-index 如 图 


z-index:1. 2 | z-index:1 


z-index:100 * z-index:100 





ee ee eee EEE Eee eee ee eeee 
No 


float 


CSS 中 规定 的 定位 机 制 ， 其 可 实现 块 级 元 素 同行 显示 并 存在 于 文档 流 之 中 。 浮 动 仅 
仅 影 响 文档 流 中 下 一 个 紧邻 的 元 素 。 


119 


布局 


float: left | right | none | inherit 


e 默认 宽度 为 内 容 宽度 
e 脱离 文档 流 (会 被 父 元 素 边界 阻挡 与 position 脱离 文档 流 的 方式 不 同 ) 
e 指 的 方向 一 直 移 动 


float:right; 





float 元 素 在 同一 文档 流 中 ， 当 同时 进行 float 时 它们 会 按照 文档 流 中 的 顺序 排 
列 。( 当 所 有 父 元 素 中 的 所 有 元 素 脱离 文档 流 之 后 ， 父 元 素 将 失去 原 有 默认 的 内 容 高 
度 ) 
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注意 : float 元 素 是 半 脱 离 文 档 流 的 ， 对 元 素 是 脱离 文档 流 ， 但 对 于 内 容 则 是 在 文档 
流 之 中 的 ( 既 元 素 重 司 但 内 容 不 重 司 ) 。 


float: left: A float is a box that is shifted to the 


left or right on the current line 





clear: both | left | right | none | inherit 


e 应 用 于 后 续 元 素 
e 应 用 于 块 级 元 素 (block) 
使 用 方法 : 
优先 级 自 上 而 下 
. Clearfix 于 父 元 素 
. 浮动 后 续 空 白 元素 .emptyDiv (clear: both} 


. 为 受到 影响 的 元 素 设 置 width: 100% overflow: hidden 也 可 
. 块 级 元 素 可 以 使 用 <br> 不 建议 使 用 ， 影 响 HTML 结构 


AA OU N = 
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/* clearfix */ 
.Clearfix:after { 
content: "."; /* Older browser do not support empty content * 


visibility: hidden; 
display: block; 
height: 0; 

clear: both; 


} 
.clearfix (zoom: 1;) /* 针对 IE 不 支持 :after */ 


flex 


flex container 


main aus 


pwe $5019 





弹性 布局 可 用 于 多 行 自 适应 ， 多 列 自 适应 ， 间 距 自 适应 和 任意 对 齐 。 


创建 flex container 


display: flex 
/* 弹性 容器 内 的 均 为 弹性 元 素 */ 


flex item 


只 有 弹性 容器 在 文档 流 中 的 子 元 素 才 属于 弹性 元 素 。 


NO 


NO 


布局 


<div style="display: flex;"> 
<div>Block Element</div> 
<!-- flex item: YES--> 
<span>Inline Element</span> 
<!-- flex item: YES--> 
<div style="position:absolute;">Absolute Block Element</div> 
<!-- flex item: YES--> 
</div> 


flex 方向 


flex-direction 


<!-- 默认 值 为 row --> 
flex-direction: row | row-reverse | column | column-reverse 


uum cen =| m 


flex-wrap 


<!-- 默认 值 为 nowrap --> 
flex-wrap: nowrap | wrap | wrap-reverse 





flex-flow 
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布局 


flex-flow 为 flex-wrap 与 flex-direction 的 简写 ， 建 议 使 用 此 属性 
(避免 同时 使 用 两 个 属性 来 修改 ) 。 


flex-flow: «'flex-direction'» || «'flex-wrap'» 


initial 





column wrap 
order 


order 的 值 为 相对 的 ( 同 被 设置 和 未 被 设置 的 值 相 比 较 ) ， 当 均 为 设置 时 默认 值 
为 0 则 按照 文档 流 中 的 顺序 排列 。 


order: <integer> 
<!-- 默认 为 0 --> 


í J€ | 


flex 弹性 


flex-basis 


其 用 于 设置 flex-item 的 初始 宽 高 (并 作为 弹性 的 基础 ) 。 如 果 flex- 
direction 是 以 row 排列 则 设置 帘 ， 如 以 column 排列 则 设置 高 。 


flex-basis: main-size | <width> 


flex-grow 
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布局 

伸展 因子 ， 其 为 弹性 布局 中 最 重要 的 元 素 之 一 ， flex-grow 设置 元 素 可 用 空余 分 
间 的 比例 。 flex-container 先 安 装 宽度 ( flex-basis ) 进行 布局 ， 如 果 有 空 
余 空间 就 按照 flex-grow 中 的 比例 进行 分 配 。 


re 


J 


Width/Height = flex-basis + flex-grow/sum(flow-grow) * remain 


flex-grow: «number» 


initial: 0 
<1-- 默认 值 为 0 --> 





flex-shrink 

收缩 因子 ， 用 于 分 配 超出 的 负 空 间 如 何 从 可 用 空间 中 进行 缩减 。 
flex-shrink: <number> 
initial: 1 
<!-- 默认 值 为 1 --> 

Width/Height = flex-basis + flow-shrink/sum(flow-shrink) * remain 


remain 为 负 值 ， 既 超出 的 区 域 。 


fiex shrink 1] fex 212 MB. flex shrink 2 fiex ene Se - shrink 1 fiex shrink 1 fex shrink 1 


shrink 1 flex shrink 1 flex shrink 2 flex shrink 1 flex shrink 1 


flex shrink 2 





flex 
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其 为 flex-grow  flex-shrink  flex-basis 的 值 缩写 。 


flex: <'flex-grow'> || <'flex-shrink'> || <'flex-basis'> 
initial: 0 1 main-size 


flex 对 齐 


justify-content 


其 用 于 设置 主轴 (main-axis) 上 的 对 其 方式 。 弹 性 元 素 根 据 主轴 (横向 和 纵向 均 
可 ) 定位 所 以 不 可 使 用 left 与 right 因为 位 置 为 相对 的 。 (行为 相似 的 属性 
有 text-align ) 


justify-content: flex-start | flex-end | center | space-between 
| space-around 
<!-- 默认 值 为 flex-start --> 







space-betwee 
j : e 7 


align-items 


其 用 于 设置 副 轴 (cross-axis) 上 的 对 其 方式 。 (行为 相似 的 属性 有 vertical- 
align ) 
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align-items: flex-start | flex-end | center | baseline | stretch 
<!-- 默认 值 为 stretch --> 





align-self 
其 用 于 设置 单个 flex-item 在 cross-axis 方向 上 的 对 其 方式 。 
align-self: auto | flex-start | flex-end | center | baseline | 


tretch 
<1-- 默认 值 为 auto --> 





flex-end 


align-content 


其 用 于 设置 cross-axis 方向 上 的 对 其 方式 。 


S 
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布局 


align-content:flex-start | flex-end | center | space-between | s 


pace-around | stretch 
<!-- 默认 为 stretch --> 
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e TX 


o 2D 变形 
m transform 


o 3D 
E 
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变形 


2D € 


m rotate() 

m transform-origin 
m translate() 

m scale() 

m skew() 


变形 


rotateY() 
perspective 
perspective-origin 
translate3d() 
scale3d() 
rotate3d() 
transform-style 
backface-visibility 


2D 变形 示例 代码 


transform 


transform 中 可 以 写 一 个 或 多 个 方法 。 
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transform: none | <transform-function>+ 
transform: none 

<!-- 默认 值 为 none --> 

transform: <transform-function>+ 


transform: translate(50%) rotate(45deg); 
transform: rotate(45deg) transform(50%) 
<!-- 变形 函数 顺序 普通 结果 不 同 ， 原 因 是 坐标 位 置 发 生 了 改变 --> 





rotate() 


rotate(<angle>) 


rotate(45deg); 
<!-- 右边 旋转 ， 顺 时 针 --> 
rotate(-60deg); 
<!-- 左边 旋转 ， 逆 时 针 --> 
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transform-origin 


其 用 于 设置 原点 的 位 置 (默认 位 置 为 元 素 中 心 ) 第 一 值 为 X 方向 ， 第 二 值 为 Y 方 
向 ， 第 三 值 为 乙方 向 。 ( 当 值 空 出 未 写 的 情况 下 默认 为 50%) 


transform-origin: [ «percentage» | «length» | left | center | ri 

ght | top | bottom] | [ [ «percentage» | «length» | left | cente 
r | right ] && [ «percentage» | «length» | top | center | bottom 
] ] «length»? 


<!-- 默认 值 为 50% 5096 --» 
transform-origin: 5096 5096; 
transform-origin: 0 0; 


transform-origin: right 50px 20px; 
transform-origin: top right 20px; 
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translate() 


移动 方法 ， 参 数 分 别 代 表 X S Y 轴 的 移动 ( 偏 移 值 均 可 为 负 值 ) 。 


translate(<translation-value>[, «translation-value»]?) 


<!-- 也 可 单独 设置 X 与 Y 轴 的 偏 移 --> 
translationX(«translation-value») 
translationY(«translation-value») 


transform: translate(50px); 

transform: translate(50px, 20%); 

<!-- Y 轴 偏 移 为 偏 移 对 象 的 高 度 ，X MARR --> 
transform: translate(-50px); 

transform: translate(20%) ; 
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scale() 





缩放 方法 ， 参 数 分 别 代表 X 与 Y 轴 的 缩放 【缩放 值 均 可 为 小 数 ) 。 当 第 二 值 忽略 
时 ， 默 认 设置 为 等 同 第 一 值 。 


scale(«number» [, <number>]?) 


scaleX(<number>) 
scaleY(<number>) 


<!-- 整体 放大 1.2  --> 
transform: scale(1.2); 
<1-- 高 度 拉 伸 --> 
transform: scale(1, 1.2); 
«1-- 宽度 拉 伸 --> 
transform: scaleX(1.2); 
<!-- 高 度 拉 伸 --> 


transform: scaleY(1.2); 
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skew() 





其 为 倾 儿 的 方法 。 第 一 值 为 Y 轴 往 X WAM GEN) ， 第 二 值 为 X MEY 3 
向 倾斜 ( 顺 时 针 ) 。 (倾斜 值 可 为 负 值 ) 


skew(<angle>[, «angle»]?) 


skewX(<angle>) 
skewY («angle») 


transform: skew(30deg); 
transform: skew(30deg, 30deg); 
transform: skewX(30deg); 
transform: skewY(30deg); 
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3D € 
3D 变形 示例 代码 


rotateY() 


3D 空间 旋转 。 


transform: rotateY(<angle>) 


perspective 


perspective-origin 





perspective 


其 用 于 设置 图 片 Y 轴 旋 转 后 的 透视 效果 。 «length» 可 以 理解 为 人 眼 与 元 素 之 间 
的 距离 ， 越 紧 则 效果 越 明显 。 
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perspective: none | «length» 


perspective: none; 
perspective: 2000px; 
perspective: 500px; 





perspective-origin 


其 为 设 定 透视 的 角度 《透视 位 置 均 可 设 定 为 负 值 ) 。 


perspective-origin: [ «percentage» | «length» | left | center | 
right | top | bottom] | [ [ «percentage» | «length» | left | cen 
ter | right ] && [ «percentage» | «length» | top | center | bott 
om ] ] 


perspective-origin: 5096 5096 

<!-- 默认 值 为 50% 50% 正中 间 的 位 置 进行 透视 - -> 
perspective-origin: left bottom; 
perspective-origin: 50% -800px; 
perspective-origin: right; 
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translate3d() 


translate3d(<translate-value>, <translate-value>, <length>) 


translateX(«translate-value») 


translateY(<translate-value>) 


translateZ(<length>) 

transform: translate3d(10px, 20%, 50px); 
«1-- % 的 参照 物 为 自身 元 素 --> 

transform: translateX(10px); 

transform: translateY( 20%); 

transform: translateZ(-100px); 
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scale3d() 


scale3d(<number>, <number>, <number>) 





scaleX(<number>) 
scaleY(<number>) 
scaleZ(<number>) 

transform: scale3d(1.2, 1.2, 1); 
transform: scale3d(1, 1.2, 1); 
transform: scale3d(1.2, 1, 1); 
transform: scaleZ(5); 


<!-- Z 轴 的 缩放 扩大 并 不 影响 盒子 大 小 - -> 
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rotate3d() 


取 XYZ 三 轴 上 的 一 点 并 于 坐标 原点 连 线 ， 以 连 线 为 轴 进 行 旋转 GENET) 。 


rotate3d(<number>, <number>, <number>, <angle>) 


rotateX(«angle») 
rotateY(«angle») 
rotateZ(<angle>) 


transform: rotate3d(1, 0, 0, 45deg); 
<!-- 上 面 等 同 于 X 轴 旋 转 --> 
transform: rotate3d(0, 1, 0, 45deg); 
<!-- 上 面 等 同 于 Y 轴 旋 转 --> 
transform: rotate3d(0, 0, 1, 45deg); 
<!-- 上 面 等 同 于 2D 旋转 --> 
transform: rotate3d(1, 1, 1, 45deg); 
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transform-style 





其 用 于 设置 保留 内 部 的 3D 空间 ， 原 因 是 一 个 元 素 进 行 transform 之 后 内 部 默认 
为 flat 。 


transform-style: flat | perserve-3d 
<!-- RUA flat --> 


transform-style: flat; 
transform-style: preserve-3d; 
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backface-visibility 


其 用 于 设置 背面 不 可 见 。 
backface-visibility: visible | hidden 


backface-visibility: visible; 
backface-visibility: hidden; 
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动 加 


Table of Contents generated with DocToc 


e 动画 


o transition 


transition-property 
transition-duration 
transition-delay 
transition-timing-function 


o animation 


动画 


动画 示例 代码 


transition 


过 度 动画 


其 为 众多 <single-transition> 的 值 缩写 。 
) 


animation-name 
animation-duration 
animation-timing-function 
animation-iteration-count 
animation-direction 
animation-play-state 
animation-delay 
animation-fill-mode 
@keyframes 


时 间 为 动画 长 度 ， 第 二 个 时 间 为 动画 延 时 


( 当 两 个 时 间 同 时 出 现 是 ， 第 一 个 
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transition: <single-transition> [',' <single-transition>]* 
<single-transition> = [none | <single-transition-property>] || « 


time» || «single-transition-timing-function» || <time> 


transition: none; 
transition: left 2s ease 1s, color 2s; 
transition: 2s; 


transition-property 


transition-property: none | «single-traisition-property» [ ',' « 
single-transition-property»]* 


«single-transition-property» = all | <IDENT> 
transition-property: none; 

<!-- 默认 值 为 none --» 

transition-property: all; 


transition-property: left; 
transition-property: left, color; 


transition-duration 
transition-duration: <time>[, <time>]* 
transition-duration: 0s; 


transition-duration: 1s; 
transition-duration: 1s, 2s, 3s; 


transition-delay 


transition-delay: <time>[,<time>]* 


transition-delay: 0s; 
transition-delay: 1s; 
transition-delay: 1s, 2s, 3s; 


transition-timing-function 


transition-timing-function: <single-transition-timing-function>[ 
',' <single-transition-timing-function>]* 


<!-- 默认 函数 为 ease --» 

«single-transition-timing-function» - ease | linear | ease-in | 
ease-out | ease-in-out | cubic-bezier(«number», «number», «number? 
,«number») | step-start | step-end | steps(<integer>)[, [start | 
end] ]?) 


<!-- 对 于 cubic-bezier 的 曲线 ， 前 两 个 值 为 P1 的 坐标 ， 后 两 值 为 P2 的 坐标 


transition-timing-function: ease; 

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); 
transition-timing-function: linear; 
transition-timing-function: cubic-bezier(0, 0, 1, 1); 


e Pe eeey 


animation 


animation: 





<single-animation> [',' <single-animation>]* 


<single-animation> = «single-animation-name» || «time» || <singl 


e-animation-timing-function» || «time» || «single-animation-iter 


ation-count» || «single-animation-direction» || «single-animatio 


n-fill-mode» || single-animation-play-state> 


animation: 
animation: 
animation: 
animation: 


none; 
abc 2s ease Os 1 normal none running; 
abc 2s; 

abc 1s 2s both, abcd 2s both; 


«1-- 调用 多 个 动画 --> 


过 
Hi 
«3| 


自动 运行 ， 但 transition 需要 触发 。 


animation-name 


animation-name 的 名 字 可 自由 定义 。 


animation-name: <single-animation-name># 
«single-animation-name» = none | <IDENT> 


animation-name: none; 
animation-name: abc; 
animation-name: abc, abcd; 


animation-duration 


£j transition-duration 属性 值 类 似 。 
animation-duration: <time>[, <time>]* 


animation-duration: 0s; 
animation-duration: 1s; 
animation-duration: 1s, 2s, 3s; 


animation-timing-function 

其 与 之 前 的 transition-timing-function 完全 一 模 一 样 。 
animation-timing-function: <timing-function># 
«single-timing-function» = <single-transition-timing-function> 
animation-timing-function: ease; 
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); 
animation-timing-function: linear; 


animation-timing-function: cubic-bezier(0, 0, 1, 1); 
animation-timing-function: ease, linear; 


animation-iteration-count 


其 用 于 动画 执行 的 次 数 (其 默认 值 为 1) 。 


animation-iteration-count: <single-animation-iteration-count># 
«single-animation-iteration-count» = infinite | «number» 
animation-iteration-count: 1; 


animation-iteration-count: infinite; 
animation-iteration-count: 1, 2, infinite; 


animation-direction 


其 用 于 定义 动画 的 运动 方向 。 


animation-direction:<single-animation-direction># 


«single-animation-direction» = normal | reverse | alternate | al 
ternate-revers 


animation-direction: reverse 
<!-- 动画 相反 帧 的 播放 --> 
animation-direction: alternate 


«1-- 往返 执行 动画 --> 
animation-direction: alternate-revers 
<!-- 相反 的 往返 动画 --> 


animation-play-state 

其 用 于 设 定 动画 的 播放 状态 。 
animation-play-state: <single-animation-play-state># 
«single-animation-play-state» - running | paused 
animation-play-state: running; 


animation-play-state: pasued; 
animation-play-state: running, paused; 


animation-delay 


其 用 于 设置 动画 的 延 时 ， 同 transition-delay 值 相同 。 


animation-delay: <time>[, <time>]* 
anim 

animation-delay: 0s; 
animation-delay: 1s; 
animation-delay: 1s, 2s, 3s; 


animation-fill-mode 


其 用 于 设置 动画 开始 时 ， 是 否 保持 第 一 帧 的 动画 和 动画 在 结束 时 时 候 保 持 最 后 的 状 
A o 


animation-fill-mode: <single-animation-fill-mode>[',' «single-an 
imation-fill-mode>]* 


«single-animation-fill-mode» = none | backwards | forwards | bot 
h 


animation-fill-mode: none; 

«1-- 不 做 设置 --> 

animation-fill-mode: backwards; 

<!-- 动画 开始 时 出 现在 第 一 帧 的 状态 --> 
animation-fill-mode: forwards; 

<!-- 动画 结束 时 保留 动画 结束 时 的 状态 --> 
animation-fill-mode: both; 

«1-- 开始 和 结束 时 都 应 保留 关键 帧 定义 的 状态 (通常 设 定 ) --> 
animation-fill-mode: forwards, backwards; 


@keyframes 


其 用 于 定义 关键 帧 。 


«I-- Sik— --> 

Qkeyframes abc ( 
from {opacity: 1; height: 100px;) 
to {opacity: 0.5; height: 200px;} 


<!-- 写法 二 --> 

Qkeyframes abcd { 
0% {opacity: 1; height: 100px;} 
100% {opacity: 0.5; height: 200px} 


@keyframes flash { 
0%, 50%, 100% {opacity: 1;} 
25%, 75% (opacity: 0;} 


<!-- 例子 --> 

animation: abc 0.5s both; 

animation: flash 0.5s both; 

animaiton: abc 0.5s both, flash ©.5s both; 
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自动 居中 一 列 布 局 


所 需 知 识 : 


e 标准 文档 流 
e 块 级 元 素 
e margin 外 边 距 属性 


«style type="text/css" media="screen"> 
article { 
width: 800px; 
margin: © auto; 
} 
</style> 


<body> 
<article> 
<hi>Title</h1> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
A natus repellendus, modi culpa, dolor ducimus debitis, facere 
dolorum cum aspernatur, soluta molestias est illo vel iusto esse 
ex ullam amet!</p> 
</article> 
</body> 


NOTE : 设置 auto 会 根据 浏览 器 宽度 自动 设置 外 边 距 尺 寸 。 在 设置 浮动 或 绝对 定位 
则 会 使 自动 居中 失效 ， 因 为 其 会 脱离 文档 流 。 

(浏览 器 宽度 - 外 包含 层 的 宽度 )/ 2 = 外 边 距 o 

横向 两 列 布局 

此 方法 也 同时 可 以 实现 横向 多 列 布局 〈 原 理 与 两 列 布局 相同 ) 。 

所 需 知 识 : 


e float 属性 ， 使 纵向 排列 的 块 级 元 素 ， 横 向 排列 


e margin Æ T€ > ix E 7| Z Ja] à mí] JE 


«style type="text/css" media="screen"> 
.Clearfix:after { 


content: "."; /* Older browser do not support empty content 

2 
visibility: hidden; 
display: block; 
height: 0; 
clear: both; 

} 

.Clearfix {zoom: 1;) /* 针对 IE 不 支持 :after */ 

body { 


width: 930px; 
margin: 9 auto; /* 横向 居中 */ 
} 
article { 
width: 800px; 
float: left; 
margin-right: 10px; 
} 
aside { 
width: 120px; 
float: right; 


} 
</style> 
«body class="clearfix"> 
<article> 
<hi>Title</h1> 


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Explicabo, quam, fugit. Accusamus voluptates nesciunt in, autem 
ipsa assumenda a iusto, reiciendis earum repudiandae, nulla nat 
us blanditiis, aliquam asperiores commodi qui.</p> 
</article> 
<aside> 
<h3>Aside Title</h3> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Expedita, molestiae!</p> 
</aside> 
</body> 


绝对 定位 的 横向 两 列 布局 
应 用 场合 较 少 ， 常 用 与 一 列 定 宽 ， 另 一 列 自 适应 。 
需要 知识 : 


e relative positon 父 元 素 相 对 定位 
e absolute 自 适 应 宽度 元 素 绝 对 定位 


注意 : 固定 宽度 列 的 高 度 需 大 于 自 适应 的 列 (原因 是 绝对 定位 会 脱离 文档 流 ， 不 能 


撑 开 父 元 素 ) 。 


«style type="text/css" media="screen"> 
body { 
position: relative; 
width: 100%; 


article { 
position: absolute; 
top: 0; 
hight: 07 
width: 800px; 

} 

aside { 
position: absolute; 
EOD 
right:800px; 
left: 0; 

} 

</style> 


<body> 
<article> 
<h1>Title</h1> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Error obcaecati sint minima totam fuga, tempora, id quia soluta 
officia iure eligendi sequi non dicta, doloribus accusamus odit 
fugiat quam quibusdam.</p> 
</article> 
<aside> 
<h3>Aside Title</h3> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Atque, doloremque .</p> 
</aside> 
</body> 


JavaScript 程序 设计 


Javascript 程序 设计 以 ECMAScript 5.1 为 标准 ， 从 基本 语法 到 原理 深入 ,理解 和 编 
写 Javascript 程 序 。 核 心 内 容 有 语言 简介 、 调 试 器 、 类 型 系统 、 内 置 对 象 、 基 本 语 
法 、 变 量 作用 域 、 闭 包 、 面 向 对 象 编 程 等 。 


JavaScript 介绍 


前 端 开 发 三 要 素 ， HTML (描述 网 页 内 容 ) ， css (描述 样 

A) ， JavaScript (控制 网 页 行为 ) ° JavaScript 为 解释 型 编程 语 (程序 不 需要 
编译 ， 程 序 在 运行 时 才 翻 译 成 机 器 语言 ， 每 执 行 一 次 都 要 翻译 一 次 )， 运 行 环境 也 
很 广泛 (浏览 器 或 操作 系统 中 NodeJS) » 


JavaScript 又 分 为 两 部 分 ，ECMAScript 和 DOM。 其 中 JavaScript 的 基本 的 语言 
属性 〈 例 如 ， 变 量 ， 作 用 域 等 ) 都 在 ECMAScript 中 有 详细 的 定义 好 比 汉 子 在 字典 
中 的 定义 。DOM 中 则 定义 如 何 修改 文档 结构 (HTML 或 XML 等 ) 。 


JavaScript 的 引入 方法 如 下 : 


<!DOCTYPE html> 


«html» 
«head» 
<title>Demo Page</title> 
</head> 
<body> 
<!-- 以 上 代码 忽略 --> 
«1-- 为 性 能 优化 需 将 javascript 代码 放置 在 body 标签 的 最 末端 --> 
«1-- 外 联 文 件 --> 


«script src="/javascripts/application.js" type="text/javascrip 
t" charset="utf-8" async defer></script> 
<!-- ARRA --> 


<script> 


</script> 
</body> 
</html> 


JavaScript 介绍 
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ECMAScript 

。 “js 语言 核心 标准 
DOM 文 档 对 象 模 型 
。 ”W3C 标准 

。 “操作 文档 对 象 的 api 


BOM 浏览 器 对 象 模型 
“操作 浏览 器 对 象 的 api 
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` ` ` aua 
Us Was 


调试 工具 都 内 置 于 主流 浏览 器 中 (Firefox 中 需 独立 下 载 Firebug) 。 更 多 关于 
Google Chrome DevTools 的 信息 可 以 在 这 里 找到 。 


var name = null; 
var $name - null; 
var nameg = null; 


关键 字 与 保留 字 


JavaScript 在 语言 定义 中 保留 的 字段 ， 这 些 
能 ， 在 程序 编写 的 过 程 中 不 可 以 当做 变量 或 
可 。 


字段 在 语言 使 用 中 存在 特殊 意义 或 功 
函数 名 称 使 用 。 无 需 记 忆 ， 报 错 修改 即 


关键 字 与 保留 字 可 以 在 Mozilla 开发 者 站 点 找到 。 


e 消除 语法 中 不 合理 与 不 安全 的 问题 ， 保 证 代码 正常 运行 
e 提高 编译 效率 ， 增 加 运行 速度 


使 用 方法 


<!-- 全 局 使 用 严格 模式 --> 
"use strict"; 
(function(){ 
console.log('>>> Hello, world!'); 


AO) 


<!-- 或 者 在 函数 内 部 声明 使 用 严格 模式 --> 
(function(){ 

"use strict"; 

console.log('>>> Hello, world!'); 
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严格 模式 与 标准 模式 的 区 别 : 


e 严格 模式 下 隐 式 声明 或 定义 变量 被 静止 

e 严格 模式 下 对 象 重 名 的 属性 在 严格 模式 下 被 静止 
e 严格 模式 下 arguments.callee() 被 禁用 

e 严格 模式 下 with() 3&4 

e 更 多 限制 


注释 
/ * 
SATE E 
uA 


// 单行 注释 


类 型 


类 型 系统 


javascript 类 型 系统 可 以 分 为 标准 类 型 和 对 象 类 型 ， 进 一 步 标准 类 型 又 可 以 分 为 原 
始 类 型 和 引用 类 型 ， 而 对 象 类 型 又 可 以 分 为 内 置 对 象 类 型 、 普 通 对 象 类 型 、 自 定义 
对 象 类 型 。 


WARS 


标准 类 型 


标准 类 型 共 包 括 了 6 个 分 别 是 : 


原始 类 型 ( 值 类 型 ) 





Undefined 


ESI 
[ETE 
RegExp 


waT 


arguments 


window navigator 
ET 












| Debug | 
! VBArray 





e Undefined undefined 


Null null 
Boolean true 
String 'hello' 
Number 123 





Sx ENE 2E 
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引用 类 型 《对象 类 型 ) 


e Object 


var obj = (3; 


<!-- fui) AAdTr 
var bool - new Boolean(true); 
var str - new String("hello"); 
var num - new Number(1); 


var objO = new Object(); 


原始 类 型 和 引用 类 型 的 区 别 : 


原始 类 型 储存 在 栈 (Stack) 中 储存 变量 的 值 ， 而 引用 类 型 在 栈 中 保存 的 是 所 引用 
内 容 储 存在 堆 (Heap) 中 的 值 。 类 似 于 指针 的 概念 ， 引 用 类 型 并 非 储存 变量 站 实数 
值 而 是 地 址 ， 所 以 对 已 引用 类 型 的 复制 其 实 只 是 复制 了 相同 的 地 址 而 非 实 际 的 变量 
值 。 


Undefined 值 : undefined 333025 € : 


e 以 声明 为 赋值 的 变量 var obj; 

e 获取 对 象 不 存在 的 属性 var obj = (x: 0); obj.y; 

e 无 返回 值 函 数 的 执行 结果 function f(){}; var obj = f(); 
e 函数 参数 没有 传 入 function f(i)(console.log(i)); f(); 


e void(expression) 
Null 44 : null 出 现场 景 : 

e 获取 不 存在 的 对 象 document.getElementById('not-exist-element') 
Boolean 值 true, false 353625 X : 


e 条 件 语句 导致 的 系统 执行 的 隐 式 类 型 转换 if (BABR) C) 
e 字面 量 或 变量 定义 var bool = true; 


String 值 : 字符 串 出 现场 景 : 
e var str = 'Hello, world!'; 


Number 值 : 整 型 直接 量 ， 八 进 制 直接 量 (0-) ， 十 六 进 制 和 直接 量 (0c) FAM 
直接 量 出 现场 景 : 


e 1026 


e 3.14 
e 1.2e5 
e 0x10 


Object 值 : 属性 集合 出 现场 景 : 


e var obj = (name: 'Xinyang'}; 


变量 转换 表 


Value Boolean Number 
undefined false NaN 
null false 0 
true true 1 
false false 0 
" false 0 
'123' true 123 
‘1a’ true NaN 
0 false 0 
1 true 1 
Infinity true Infinity 
NaN false NaN 
Ü true NaN 


类 型 识别 


e typeof 
e Object.prototype.toString 


constructor 


e instanceof 
typeof : 


e 可 以 是 标准 类 型 (Null 除外 ) 


String 
"undefined" 
"null" 

"true" 

"false" 

'123' 

"a 

"o" 

"4" 

"Infinity" 

'NaN' 

"[object Object]" 


e 不 可 识别 具体 的 对 象 类 型 (Function 除外 ) 
Object.prototype.toString : 
e 可 是 识别 标准 类 型 及 内 置 对 象 类 型 (例如 ，Object, Date, Array) 
e 不 能 识别 自 定 义 对 象 类 型 
constructor : 
e 可 以 识别 标准 类 型 (Undefined/Null 除外 ) 


e 可 识别 内 置 对 象 类 型 
e 可 识别 自 定 义 对 象 类 型 


function getConstructiorName(obj) { 


return obj && obj.constructor && obj.constructor.toString().ma 
tch(/tunetronss C E^(C T) E315 


j 


getConstructiorName([]) === "Array"; // true 


instanceof : 
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e 类 型 识别 


类 型 识别 


e typeof 
e Object.prototype.toString 
e constructor 


e instanceof 
typeof : 

。 可 以 是 标准 类 型 (Null 除外 ) 

e 不 可 识别 具体 的 对 象 类 型 (Function 除外 ) 
Object.prototype.toString : 


e 可 是 识别 标准 类 型 及 内 置 对 象 类 型 (例如 ，Object, Date, Array) 
e 不 能 识别 自 定 义 对 象 类 型 


constructor : 


e 可 以 识别 标准 类 型 (Undefined/Null 除外 ) 
e 可 识别 内 置 对 象 类 型 
e 可 识别 自 定义 对 象 类 型 


function getConstructiorName(obj) { 

return obj && obj.constructor && obj.constructor.toString().ma 
tch(/tuncecronss (AC ]*)7 [41> 
} 


getConstructiorName([]) === "Array"; // true 


instanceof : 


— 始 类 型 
e 可 判别 内 置 对 象 类 型 
e 可 判 see 型 


JavaScript 的 数据 类 型 可 以 分 为 : 标准 类 型 和 对 象 类 型 。 


标准 类 型 有 :undefined Null Boolean Date Number Object 


对 象 类 型 (构造 器 类 型 ) +: Boolean Date Number Object Array Date Error 
Function RegExp 


用 来 判断 数据 类 型 的 一 般 有 四 种 方式 ， 分 别 是 : 


e typeof 
e Prototype.toString() 
e constructor 


e instanceof 


下 面 我 们 写 一 个 HTML 来 检验 一 下 : 


«html» 

«head» 
<title>JavaScript & # A|Bi«/title» 
<meta charset="utf-8"> 
<style type="text/css"> 

.red{ 
background-color: red; 
} 
</style> 

</head> 

<body> 
<script type="text/javascript"> 

/* Standard Type */ 


var a; //undefined 

var b = document.getElementById("no exist element"); //n 
ull 

var c = true; / /Boolean 

var d = 1; / /Number 

var e = "str"; M String 

var f = {name : "Tom"}; //0bject 


/* Object Type ^7 


var g - new Boolean(true); //Boolean Object 

var h = new Number(1); //Number Object 

var i = new String("str"); //String Object 

var j = new Object((name : "Tom"}); //Object Object 
var k = new Array([1, 2, 3, 4]); //Array Object 


var 1 = new Date(); //Date Object 
var m = new Error(); 

var n = new Function(); 

var o = new RegExp("\\d"); 


/* Self-Defined Object Type */ 
function Point(x, y) ( 


ts» X; 


y; 


this.y 


Point.prototype.move = function(x, y) { 
this ox T x; 
this.y += y; 


var p - new Point(1, 2); 


/* Use the Prototype.toString() to judge the type */ 
function type(obj)( 
return Object.prototype.toString.call(obj).slice(8, 
-1).toLowerCase(); 
} 
</SCript> 
<table border="1" cellspacing="0"> 
<tr> 
<td></td> 
<td>typeof</td> 
<td>toString</td> 
<td>constructor</td> 
<td>instanceof</td> 
SAES 
SIBI 
<td>undef ined</td> 
<td><script type="text/javascript">document.write(ty 
peof a)</script></td> 
<td><script type="text/javascript">document.write(ty 
pe(a) )</script></td> 
<td class="red"><script type="text/javascript">docum 
ent.write(a.constructor )</script></td> 


«td class="red"><script type="text/javascript">docum 
ent.write(a instanceof "undefined" )</script></td> 
</tr> 
ec» 
<td>Null</td> 
<td class="red"><script type="text/javascript">docum 
ent .write(typeof b);</script></td> 
<td><script type="text/javascript">document .write(ty 
pe(b));</script></td> 
<td class="red"><script type="text/javascript">docum 
ent.write(b.constructor);«/script»«/td» 
<td class="red"><script type="text/javascript">docum 
ent.write(b instanceof "null");</script></td> 
<tr 
«n 
<td>Boolean</td> 
<td><script type="text/javascript">document.write(ty 
peof c);</script></td> 
<td><script type="text/javascript">document.write(ty 
pe(c));</script></td> 
<td><script type="text/javascript">document.write(c. 
constructor );</script></td> 
<td class="red"><script type="text/javascript">docum 
ent.write(c instanceof "boolean");</script></td> 
Str» 
<tr> 
<td>Number</td> 
<td><script type="text/javascript">document.write(ty 
peof d);</script></td> 
<td><script type="text/javascript">document.write(ty 
pe(d));</script></td> 
<td><script type="text/javascript">document.write(d. 
constructor );</script></td> 
<td class="red"><script type="text/javascript">docum 
ent.write(d instanceof "number");</script></td> 
</tr> 
<tr> 
<td>String</td> 
<td><script type="text/javascript">document.write(ty 
peof e);</script></td> 


<td><script type="text/javascript">document.write(ty 
pe(e));</script></td> 
<td><script type="text/javascript">document.write(e. 
constructor );</script></td> 
<td class="red"><script type="text/javascript">docum 
ent.write(e instanceof "string");</script></td> 
</tre 
<tr> 
<td>0bject</td> 
<td><script type-"text/javascript'»document.write(ty 
peof f);</script></td> 
<td><script type="text/javascript">document .write(ty 
pe(f));</script></td> 
<td><script type="text/javascript">document.write(f. 
constructor );</script></td> 
<td class="red"><script type="text/javascript">docum 
ent.write(f instanceof "object");</script></td> 
</tr> 
<tr><td colspan="5">----------------------- </td></tr> 
<tr> 
<td>Boolean Object</td> 
<td class="red"><script type="text/javascript">docum 
ent.write(typeof g);</script></td> 
<td><script type="text/javascript">document .write(ty 
pe(g));</script></td> 
<td><script type="text/javascript">document.write(g. 
constructor );</script></td> 
<td><script type="text/javascript">document.write(g 
instanceof Boolean);</script></td> 
TAT 
<tr> 
<td>Number Object</td> 
<td class="red"><script type="text/javascript">docum 
ent.write(typeof h);</script></td> 
<td><script type="text/javascript">document.write(ty 
pe(h));</script></td> 
<td><script type="text/javascript">document.write(h. 
constructor );</script></td> 
<td><script type="text/javascript">document.write(h 
instanceof Number );</script></td> 


</tr> 
<tr> 
<td>String Object</td> 
<td class="red"><script type="text/javascript">docum 
ent.write(typeof i);</script></td> 
<td><script type="text/javascript">document.write(ty 
pe(i));</script></td> 
<td><script type="text/javascript">document.write(i. 
constructor );</script></td> 
<td><script type="text/javascript">document.write(i 
instanceof String);</script></td> 
</tr> 
<tr> 
<td>Object Object</td> 
<td class="red"><script type="text/javascript">docum 
ent.write(typeof j);</script></td> 
<td><script type="text/javascript">document.write(ty 
pe(j));</script></td> 
<td><script type="text/javascript">document.write(j. 
constructor );</script></td> 
<td><script type="text/javascript">document .write(] 
instanceof Object);</script></td> 
RM EIE 
<tr> 
<td>Array Object</td> 
<td class="red"><script type="text/javascript">docum 
ent.write(typeof k);</script></td> 
«td»«script type="text/javascript">document .write(ty 
pe(k));</script></td> 
<td><script type="text/javascript">document.write(k. 
constructor );</script></td> 
<td><script type="text/javascript">document.write(k 
instanceof Array) ;</script></td> 
SABE 
<tr> 
<td>Date Object</td> 
<td class="red"><script type="text/javascript">docum 
ent.write(typeof 1);</script></td> 
<td><script type="text/javascript">document.write(ty 
pe(1l));</script></td> 


<td><script type-z"text/javascript'"»document.write(l. 
constructor );</script></td> 
<td><script type="text/javascript">document.write(1l 
instanceof Date);</script></td> 
</tr> 
<tr> 
<td>Error Object</td> 
<td class="red"><script type="text/javascript">docum 
ent.write(typeof m);</script></td> 
<td><script type="text/javascript">document.write(ty 
pe(m));</script></td> 
<td><script type="text/javascript">document.write(m. 
constructor );</script></td> 
<td><script type="text/javascript">document.write(m 
instanceof Error);«/script»«/td» 
sp 
<tr> 
<td>Function Object</td> 
<td><script type="text/javascript">document.write(ty 
peof n);</script></td> 
<td><script type="text/javascript">document.write(ty 
pe(n));</script></td> 
<td><script type="text/javascript">document.write(n. 
constructor );</script></td> 
<td><script type="text/javascript">document.write(n 
instanceof Function) ;</script></td> 
</tr> 
<tr> 
<td>RegExp Object</td> 
<td class="red"><script type="text/javascript">docum 
ent.write(typeof o);</script></td> 
<td><script type="text/javascript">document.write(ty 
pe(o));</script></td> 
<td><script type="text/javascript">document.write(o. 
constructor );</script></td> 
<td><script type="text/javascript">document.write(o 
instanceof RegExp);</script></td> 
</tr> 
<tr><td colspan="5">----------------------- </td></tr> 
<tr> 


<td>Point Objct</td> 

<td class="red"><script type="text/javascript">docum 
ent.write(typeof p);</script></td> 

<td class="red"><script type="text/javascript">docum 
ent .write(type(p));</script></td> 

<td><script type="text/javascript">document.write(p. 
constructor );</script></td> 

<td><script type="text/javascript">document.write(p 
instanceof Point);</script></td> 

</> 
</table> 

</body> 
</html> 


执行 的 结果 如 下 : 


ypeor Sting [constructor — — — —— instanceof 
undefined jundefined|undefined 

null 

String [sring [string function String) { [native code]} —  — 


1 
unction Objectlfunction [function [function FunctionO { [native code]} frue — 7 


oint Objct function Point(x, y) { this.x = x; this.y = y; ) 





其 中 红色 的 单元 格 表示 该 判断 方式 不 支持 的 类 型 。 


HEIA 
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m JSON.stringify 
m JSON.parse 
m 全 局 对 象 
m NaA 
m parselnt 
m eval 
m encodedURIComponent 


A Ep RB 


通常 情况 下 只 有 对 象 才 存 在 方法 ， 但 JavaScript 不 同 它 具 有 12 种 内 置 对 象 。 内 置 
分 为 两 类 ， 普 通 对 象 〈《 属 性 和 方法 ) 与 构造 器 对 象 ( 可 用 于 实例 化 普通 iq. 
下 包含 原型 对 象 属 性 和 方法 ， 及 实例 对 象 属性 和 方法 ) 。 


JavaScript 对 象 原 型 链 的 简要 说 明 


function Point(x, y) { 
this.x 
this.y 
} 
Point.prototype.move = function(x, y) { 
this.x *- x; 
this y= 
} 


var p = new Point(1, 1); 


X; 
y; 


p.move(2,2); 


_proto 称 之 为 原型 链 ， 有 如 下 特点 : 


1. . proto 为 对 象 内 部 的 隐藏 属性 

2. proto 为 实例 化 该 对 象 的 构造 器 的 prototype 对 象 的 引用 ， 因 此 可 
以 直接 方法 prototype 的 所 有 属性 和 方法 

3. 除了 Object 每 个 对 象 都 有 一 个 ”proto 属性 且 逐 级 增长 形成 一 个 链 ， 
原型 链 顶 端 是 一 个 Object WRe 

4. 在 调用 属性 或 方法 时 ， 引 擎 会 查找 自身 的 属性 如 果 没 有 则 会 继续 沿 着 原型 链 逐 
级 向 上 查找 ， 直 到 找到 该 方法 并 调用 。 

5. | proto 跟 浏览 器 引擎 实现 相关 ， 不 同 的 引擎 中 名 字 和 实现 不 尽 相 同 


(chrome ^ firefox F4 ir Æ proto  ， 并 且 可 以 被 访问 到 ，|E 中 无 法 访 
问 )。 基 于 代码 兼容 性 、 可 读 性 等 方面 的 考虑 ， 不 建议 开发 者 显 式 访问 

. proto ”属性 或 通过 ”proto 更 改 原型 链 上 的 属性 和 方法 ， 可 以 通过 
更 改 构造 器 prototype 对 象 来 更 改 对 象 的 proto 属性 。 


构造 器 对 象 与 普通 对 象 的 区 别 


> function Point(x, y) {this.x = x; this.y=y;} 
undefined 

> Point.prototype.move = function(x, y) {this.x += x; this.y*-y;) 
function Point.move(x, y) 

» var point - new Point(1, 2); 


undefined 
» point 
v Point (x: 1, y: 2} 
X: 1 
yi 
v proto : Point 


» constructor: function Point(x, y) {this.x = x; this.y=y;} 
> move: function (x, y) {this.x += x; this.yt=y;} 
v proto : Object 


P». defineGetter : function __defineGetter__() { [native code] } 
>  defineSetter : function __defineSetter__() { [native code] } 
>  lookupGetter : function __lookupGetter__() { [native code] } 


>  lookupSetter : function __lookupSetter__() { [native code] } 

> constructor: function Object() { [native code] } 

p> hasOwnProperty: function hasOwnProperty() { [native code] } 

> isPrototypeOf: function isPrototypeOf() { [native code] } 

> propertyIsEnumerable: function propertyIsEnumerable() { [native code.. 
> toLocaleString: function toLocaleString() { [native code] } 

> toString: function toString() ( [native code] } 

> valueOf: function valueOf() { [native code] } 

> get proto : function, proto () { [native code] } 

> set proto : function proto () { [native code] } 


1. 构造 器 对 象 原型 链 中 的 — proto 是 一 个 Function.prototype 对 象 的 
引用 ， 因 此 可 以 调用 Function.prototype 的 属性 及 方法 

2. 构造 器 对 象 本 身 有 一 个 prototype 属性 ， 用 该 构造 器 实例 化 对 象 时 该 
prototype 会 被 实例 对 象 的 proto 所 引用 

3. 构造 器 对 象 本 身 是 一 个 function 对 象 ， 因 此 也 会 有 自身 属性 


标准 内 置 对 象 
构造 器 对 象 


e Object 


e Boolean 
e String 

e Number 
e Function 
e Array 

e RegExp 
e Date 

e Error 


其 他 对 象 


e Math 
e JSON 
e 全 局 对 象 


置 对 象 ， 其 实 也 叫 内 置 构造 器 ， 它 们 可 以 通过 new 的 方式 创建 一 个 新 的 实例 对 
象 。 内 置 对 象 所 属 的 类 型 就 叫 内 置 对 象 类 型 。 其 声明 方式 如 下 


var i - new String("str"); // String Object 
var h = new Number(1); // Number Object 
var g - new Boolean(true); // Boolean Object 
var j = new Object({name : "Tom"}); // Object Object 
var k = new Array([1, 2, 3, 4]); // Array Object 
var l - new Date(); // Date Object 
var m = new Error(); 

var n - new Function(); 

var 0 = new RegExp("\\d"); 


注意 : 虽然 标准 类 型 中 有 Boolean String Number Object » A EXE X 
型 中 也 有 Boolean String Number Object Voc et 过 不 同 的 声 
明 方 式 来 进行 区 别 的 。 标 准 类 型 通过 直接 赋值 ， 而 对 象 类 型 则 是 通过 构造 器 实现 初 
始 化 。 


构造 器 的 原型 对 外 在 对 象 实 例 化 时 将 会 被 添加 到 实例 对 象 的 原型 链 当 中 。 
- proto 为 原型 链 属 性 ， 编 码 时 不 可 被 显 像 调用 。 但 是 实例 化 对 象 可 以 调 
用 原型 链 上 的 方法 。 


用 String/ Number 等 构造 器 创建 的 对 象 原型 链 顶 端 对 象 始终 是 一 个 Object 对 象 ， 
此 这 些 对 象 可 以 调用 Object 的 原型 对 象 属性 和 方法 。 所 以 String/Number 等 构造 器 
是 Object 的 子 类 。 


更 多 关于 Object 的 内 容 可 以 在 这 里 找到 。 
构造 器 说 明 : 


e Object 是 属性 和 方法 的 集合 
e String/Number/Boolean/Array/Date/Error 构造 器 均 为 Object 的 子 类 并 集成 
Object 原型 对 象 的 属性 及 方法 。 


实例 化 方法 
var objO = new Object((name: 'X', age: 13}); 


// 常用 方法 
var obji = (name: 'Q', age: 14}; 


属性 及 方法 


e prototype 


e Create 
e keys 
€ ... 
x** 原 型 对 象 属性 及 其 方法 


e constructor 

e toString 

e valueOf 

e hasOwnProperty 


实例 对 象 属性 及 方法 


无 


Object.create 


功能 : 基于 原型 对 象 创造 新 对 象 


// Object.create(prototype[, propertiesObject]) 
var prototype = (name: 'X', age: 13); 
var obj - Object.create(proto); 


Object.prototype.toString 
功能 : 获取 方法 调用 者 的 标准 类 型 
/7/ objectinstance.toString() 


var obj = {}; 
obj.toString(); // Object 


Object.prototype.hasOwnProperty 
功能 : 判断 一 个 属性 是 否 是 一 个 对 象 的 自身 属性 


// objectinstance.hasOwnProperty("propertyName") 


var obj = Object.create((a: 1, b: 23); 
obj.c = 3; 

obj.hasOwnProperty('a'); // false 
obj.hasOwnProperty('c'); // true 


Boolean 
构造 器 说 明 : 4&7] true 4 false 
属性 及 方法 
e prototype 
* 原 型 对 得 属性 及 其 方法 


e constructor, toString, valueOf 


String 


构造 器 说 明 : 单 双 引号 内 的 字符 串 


实例 化 方法 


Hello, ‘world!’ 
var strO = 'Xinyang'; 
var stri = new String('Xinyang'); 


属性 及 方法 


e prototype 
e fromCharCode (转换 ASCII 代码 为 字符 ) 


原型 对 象 属性 及 其 方法 


e constructor 
e indexOf 

e replace 

e Slice 

e split 

e charCodeAt 
e toLowerCase 


String.prototype.indexOf 

功能 : 获取 子 字符 串 在 字符 串 中 的 索引 
// stringObject.indexOf(searchValue, fromIndex) 
var str - "I am X. From China!"; 
var index - str.indexOf('a'); //2 


str.indexOf('a', index + 1); // 16 
str.indexOf('Stupid'); // -1 字符 串 不 存在 


String.prototype.replace 


功能 : 查找 字符 串 替 换 成 目标 文字 


// stringObject.replace(regexp/substr, replacement) 
var str = "apple is bad"; 
str = str.replace('bad', 'awesome'); 


String.prototype.split 


功能 : 按 分 隔 符 将 分 隔 符 分 成 字符 囊 数组 


// stringObject.split(separator, arrayLength) 
Var stro 1 2 347; 

SSE "on rz pa A; 
ersparen 

Se SIDI (NE 


Number 


构造 器 说 明 : 整 型 直接 量 ， 八 进 制 直接 量 (0-) ， 十 六 进 制 直接 量 (0x-)， 浮 点 型 


直接 量 


实例 化 方法 


10 

17205 

var count = 0x10; 

var pi = new Number (3.1415); 


属性 及 方法 


e prototype 

e MAX VALUE 

e MIN VALUE 

e NaN 

e NEGATIVE INFINITY 
e POSITIVE INFINITY 


原型 对 象 属性 及 其 方法 


e constructor 
e toFixed 
e toExponential 


Number.prototype.toFixed 


功能 : 四 使 五 入 至 指定 小 数位 


// numberObject.toFixed(num) 
var numO - 3.14; 
numO.toFixed(1); // 3.1 

var numi = 3.35; 
numi.toFixed(1); // 3.4 


Array 


构造 器 说 明 : 定义 数组 对 象 


实例 化 方法 


var a0 = [1, 'abc', true, function(){}]; 
var a1 - new Array(); 
var a2 = new Array(1, 'abc', true); 


属性 及 方法 


e prototype 
e isArray 


原型 对 象 属性 及 其 方法 


e constructor 
e Splice 

e forEach 

e find 

e concat 

e pop 


e push 
e reverse 
e shift 
e Slice 


Array.prototype.splice 


功能 : 从 数组 中 删除 或 添加 元 素 ， 返 回 被 删除 的 元 素 列 表 〈 作 用 域 原 有 数组 ) 


// arrayObject.splice(start, deleteCount[, 


]) 


Vale alee e 


var ret 


n2 We 


tb EON 


arr splaice(2, 2. t. ip "bts 


appo wc CE qr EE 


EOM 


HE 3. 25a] 


Array.prototype.forEach 


功能 : 遍历 元 素 组 并 调用 回调 函数 


// arrayObject.forEach(callback[, thisArg]) 


// mAh 


// function callback(value, index, arrayObject) (.. 


*L 


itemi[, 


12 E pure 


item2[, 


AI 


-} 


// value - 当前 值 index - 当前 索引 arrayObject - 数组 本 身 


function logArray(value, index, arrayObject) ( 


console.log(value); 


console.log(value 


j 


array[index]); 


[2, 5, 6, 9].forEach(logArray); 


Function 


构造 器 说 明 : 定义 函数 或 新 增 对 象 构 造 器 


实例 化 方法 


.]] 


// 对 象 实例 化 

var fO = new Function('i', 'j', 'return (i + j)'); 
// BRR FA e 

FUNCTION Fi 3) return ah a Jey 

// 函数 表达 式 


var f3 = function(i, j)(return i + j;}; 
属性 及 方法 
e prototype 


原型 对 象 属性 及 其 方法 


e constructor 
e apply 

e call 

e bind 


实例 对 象 属 性 和 方法 


e length 

e prototype 
e arguments 
e caller 


A EUI RAH He 85 


下 面 的 代码 声明 一 个 Point 增加 了 一 个 move 方 法 ， 最 后 创建 了 一 个 Point 的 实例 对 
Zo 


function Point(x, y) 4 
this.x = x; 
this.y = y; 


Point.prototype.move = function(x, y) { 
this.x += x; 
this.y += y; 


var p = new Point(1, 2); 


Function.prototype.apply 


功能 : 通过 参数 指定 调用 者 和 函数 参数 并 执行 该 函数 


// functionObj.apply(thisArg[, argsArray]) 
function Poxnt(x, v) 1 

this.x = x; 

this.y = y; 


Point.prototype.move = function(x, y) { 
Chas. x =" A 
this.y += y; 


var p = new Point(1, 1); 
Val circle: = 05€ 1 y: ira) 
p.move.apply(circle, [2, 1]); 77 {x: 3, y: 2, r: 1} 


Function.prototype.bind 


功能 : 通过 参数 指定 函数 调用 者 和 函数 参数 并 返回 该 函数 的 引用 


// tunctrzonobgj.band(thksArg[ argil, Aan 19 
function Point(x, y) { 


this x 207 


y; 


this.y 


Point.prototype.move = function(x, y) { 
thgsccbm Xs 
this.y += y; 


var p - new Point(1, 1); 

var circle = Dx 1 y: do r Iy; 

var circleMoveRef = p.move.bind(circle, 2, 1); 
setTimeout(circleMoveRef, 1000); // (x: 3, y: 2, r: 


// 之 间 使 用 circleMoveRef() 效果 等 同 于 apply() 
circleMoveRef(); 


bunctszon errcle(x, vor) 

Point.apply(this, [x, y]); 

this.radius - r; 
} 
Circle.prototype = Object.create(Point.prototype); 
Circle.prototype.constructor - Circle; 
Circle.prototype.area = function(){ 

return Math.PI * this.radius * this.radius; 


var c = new Circle(i, 2, 3); 
c.move(2, 2); 
c.area(); 


函数 调用 


° B9 


e apply 


e call 
Ky BB A 
。 形 参 个 数 不 一 定 等 于 实 参 个 数 


e 通过 参数 类 型 检查 实现 函数 重 载 


arguments 
arguments 的 常用 属性 


e length 实 参 个 数 
e 0...arguments.length-1 实 参 属性 名 称 (key) 
e callee HAAF 


function max(a, b) { 
if (max.length === arguments.length) { 
return a»b?a:b; 
) else { 
var max = arguments[0]; 
for(var i = 0; i « arguments.length; i++) { 
if ( max < arguments[i]) 1 
_max = arguments[i]; 


} 


return _max; 


值 专递 
函数 参数 的 值 专递 是 参数 复制 都 是 栈 内 存 中 的 复制 。 


























原始 类 型 引用 类 型 。 堆 内 存 
复制 前 栈 内 存 
复制 后 栈 内 存 NEM 
numl 123 [——] 
ss ain du A UO iis wick cl de DOR dal a a | obj2 | | “一 一 
复制 后 栈 内 存 [Lai 一 | 一 (a:1) 
[num] | 123 | 











// 原始 类 型 
function plusplus(num) ( 
return num++; 
} 
var count = 0; 
var result = plusplus(count); // result = 1; count = 0; 


// 引用 类 型 
function setName(obj) { 
obj.name = 'obama'; 


} 


var president = {name: 'bush'}; 
setName(president); // (name: '‘obama'}; 


HAER 
以 Require.JS 中 的 define() 为 例 : 
define(function()( 


var add - function(x, y) ( 
return x + y; 


u 

return f 
add: add 

u 


}) 





AE E 


define(['lib'], function(){ 
Var add = tunction(x, y) 1 
return x * y; 


3 
return f 
add: add 
3 
}) 


define('math', ['lib'], function(){ 
var add = function(x, y) { 
return x + y; 


}; 
return 1 
add: add 
3 
}) 


// define 的 实现 代码 
/** 

* The function that handles definitions of modules. Differs fro 
m 

* require() in that a string for the module should be the first 
argument, 

* and the function to execute after dependencies are loaded sho 
uld 

* return a value to define the module corresponding to the firs 
t argument's 

* name. 

7 
define = function (name, deps, callback) { 

var node, context; 


//Allow for anonymous modules 
if (typeof name !== 'string') { 
//Adjust args appropriately 
callback - deps; 
deps - name; 
name = null; 
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//This module may not have dependenc 
LT a a { 

callback = deps; 

deps = null; 


了 


RegExp 


构造 器 说 明 : 用 于 定义 正则 表达 式 ， 一 个 RegExp 对 象 包含 一 个 正则 表达 式 和 关联 
的 标志 
定义 方法 


e /pattern/flags 
e new RegExp(pattern[, flags]); 


属性 及 方法 
e prototype 
原型 对 象 属性 及 其 方法 


e constructor 
e test 
e exec 


RegExp.prototype.test 


功能 : 使 用 正则 表达 式 对 字符 串 进 行 测 试 ， 并 返回 测试 结果 


// regexObj.text(str) 

var reg - /^abc/i; 
reg.test('Abc123'); // true 
reg.test('1Abc1234'); // false 


Date 
构造 器 说 明 : 用 于 定义 日 期 对 象 
定义 方法 


var dateO = new Date(); 
var datei = new Date(2014, 3, 1, 7, 1, 1, 100); 


属性 及 方法 


e prototype 


e parse 

e now 

e 
原型 对 象 属 性 及 其 方法 


e Constructor 
e Date 

e getDate 

e getHours 
e SetDate 

e SetHours 


标准 内 置 对 象 
Math 


对 象 说 明 : 拥有 属性 和 方法 的 单一 对 象 主要 用 于 数字 计算 


对 象 属 性 : 


e E 
e Pl 
e SQRT2 


对 象 方 法 : 


e floor 

e random 
e abs 

e max 

e COS 

e ceil 


Math.floor 

功能 : 向 下 取 整 
// Math.floor(num) 
Math.floor(0.97); // 0 


Math-rioor(b. 1); 77-5 
Math.fioor(-5.1), 7/6 


相似 方法 : ceil * round 
Math.random 


功能 : 返回 0~1 ZAM FAK 


// Math.random() 
Math.random(); // 0.14523562323461 


JSON 
对 象 说 明 : 用 于 存储 和 交换 文本 信息 
对 象 方法 : 


e parse 
e stringify 
JSON.stringify 
功能 : 将 ISON 对 象 转换 为 字符 转 
// JSON.stringify(value[, replacer[, space]]) 
var json = ('name': 'X'}; 
JSON.stringify(json); 77 "{"name":"X"}" 
JSON.parse 
功能 : 将 ISON 字符 转 转 换 为 对 象 
// JSON.parse(text[, reviver]) 


var jsonStr = 1 name s x E 
JSON.parse(jsonStr); // (name: 'X'} 


Be kay S 

全 局 对 象 定义 了 一 系列 的 属性 和 方法 在 编程 过 程 中 可 以 被 之 问 调 用 。 
属性 : NaN ， Infinity > undefined 

方法 : 


e parselnt 
e parseFloat 
e isNaN 

e isFinite 

e eval 


处 理 URI 方法 : 


e encodedURIComponent 
e decodeURIComponent 
e encodedURI 

e decodeURI 


构造 器 属性 : 


e Boolean 
e String 

e Number 
e Object 
e Function 
e Array 

e Date 

e Error 


对 象 属性 : 


e Math 
e JSON 


NaA 


非 数字 值 : 表示 错误 或 无 意义 的 运算 结果 ，NaN 参与 运 萌 仍 会 返回 NaA， 且 NaN 
不 等 于 任何 值 ， 包 括 它 本 身 。 可 以 使 用 isNaN() 判断 运算 结果 的 类 型 是 否 为 
NaN e 


isNaN(NaN); // true 
isNaN(4 - '2a'); // true; 


parselnt 


功能 : 转换 字符 囊 成 数字 


// parselnt(string[, radix]) 
// radix - 为 进 制 数 
parserWb( 070 3 774 
parseInt('010', 8) // 8 
parselInt('010', 16) // 16 


parseInt('Ox1if'); // 31 
parsemntt Oxi 516) 77 ST 
parseInt( d4f'). /7 1 
parseInt('1f', 16); // 31 


eval 


功能 : 计算 字符 囊 并 执行 其 中 的 JavaScript 代码 (会 带 来 安全 性 和 代码 逻辑 问题 ， 
通常 不 建议 使 用 ) 


// eval(string) 
var res = '("error": "Q", "msg": "OK"; 
var obj; 
if (!JSON) { 
obj = eval('(' + res + ')'); 
} else { 
obj = JSON.parse(res); 


encodedURIComponent 
功能 : 将 URI 参数 中 的 特殊 字符 ， 中 文 等 作为 URI 的 一 部 分 进行 编码 
var uri = "http://w3schools.com/my test.asp?name-stále&car-saab" 


. 
, 


var res = encodeURIComponent(uri); 


M SARR 
// http%3A%2F%2Fw3schools .com%2Fmy%20test .asp%3Fname%3Dst%C3%A51 
e%26car%3Dsaab 


PES R 
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e 变量 作用 域 
o 作用 域 介绍 
m 静态 作用 域 
m 动态 作用 域 
o JavaScript 变量 作用 域 
a 词法 环境 


m 组 成 

a 创建 

m 结构 
关于 词法 环境 的 问题 
m with 语 4) 


m try-catch 4 X 
m 带 名 称 的 函数 表达 式 


变量 作用 域 
变量 的 作用 域 值 的 是 变量 的 生命 周期 和 作用 范围 (全 局 与 局 部 作用 域 的 区 别 ) 。 
作用 域 介 绍 


静态 作用 域 


静态 作用 域 有 称 为 词法 作用 域 ， 即 指 其 在 编译 的 阶段 就 可 以 决定 变量 的 引用 。 静 态 
作用 域 只 更 变量 定义 的 位 置 有 关 与 代码 执行 的 顺序 无 关 。 


变量 作用 域 


var x = 0; 
function fool) t 
alert(x); 


j 


function bar() { 
var x - 20; 
foo(); 

} 


foo(); 


E 


|| «function» — 





动态 作用 域 


动态 作用 域 的 变量 引用 只 可 在 程序 运行 时 刻 决定 (其 通常 通过 动态 栈 来 进行 管 
理 ) 。 
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var x = 0; 

function foo() A 
alert(x); 

} 


function bar() { 
var x = 20; 
foo(); 

} 


foo(); 











JavaScript 变量 作用 域 


JavaScript (1) 使 用 静态 作用 域 ，(2) 其 没有 块 级 作用 域 (只 有 函数 作用 域 ， 就 
是 只 有 function 用 于 可 以 定义 作用 域 ) > (3) HESS 之 作 使 用 词法 环境 来 管理 作 
用 域 。 

词法 环境 

组 成 


词法 环境 用 来 描述 静态 作用 域 的 数据 结构 。 它 由 环节 记录 和 外 部 词法 环境 的 引 
用 组 成 。 


e 环境 记录 (record) ( 指 形 参 ， 变 量 ， 函 数 等 ) 
e 外 部 词法 环境 的 引用 (outer) 


创建 


变量 作用 域 


在 一 段 代码 执行 之 前 ， 先 初始 化 词法 环境 。 会 被 初始 化 的 有 : 


e 形 参 
e 函数 定义 (创建 函数 对 象 ， 会 保存 当前 作用 域 。 见 下 图 ) 
e 变量 定义 (所 有 初始 化 值 均 为 ”undefined ) 





var x = 10; 
bunc Exon TOOK y) 
var z - 30; 
function bar(q) { 
return X * y * z * q; 


} 

return bar; 
} 
var bar = foo(20); 
bar(40); 


全 局 词法 作用 域 (初始 化 状态 ) 
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变量 作用 域 






bar:undefined 









Sh ds E E X 
diis T bar:cfunction» | 
第 二 步 
record 4 | 
" 
"S P 9 | 





关于 词法 环境 的 问题 








record | foo:<function> - 
bar:undefined 













record | foo:«function» 











record | foo:function» 


outer | nul | 
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$ 


命名 冲突 


形 参 ， 函 数 定义 ， 变 量 名 称 命名 冲突 。 其 中 的 优先 级 的 排序 如 下 : 


E 


HAEL > 形 参 > 变量 


arguments 的 使 用 
为 函数 中 定义 好 的 变量 。 
函数 表达 式 与 函数 定义 的 区 别 


e 函数 表达 式 是 在 执行 时 才 创建 函数 对 象 。 
e 函数 定义 为 在 代码 执行 之 前 就 进行 创建 的 。 


with 74 47 


with 会 创造 一 个 临时 作用 域 。 


var foo = 'abc'; 
with({ 
foo: "bars 
}) i 
function f() { 
alert(foo); 
J; 
(function() { 
alert(foo); 
300; 
f(); 


try-catch 4) 7% 


变量 作用 域 


try { 
var e = 10; 
throw new Error(); 
} catch (e) { 
function f() { 
alert(e); 
} 
(function() { 
alert(e); 
300; 
f(); 


带 名 称 的 函数 表达 式 


当 一 个 函数 表达 式 有 了 名 称 之 后 ，JavaScript 会 创建 一 个 新 的 词法 环境 。 并 在 这 个 
词法 环境 中 用 有 一 个 属性 A 指向 这 个 函数 ， 同 时 这 个 属性 人 指向 的 函数 是 不 可 被 修 
改 的 。 


下 面 例子 为 不 常规 的 写法 


(function A()( 
A ae 
alert(A); 

3)0; 


record [ A:<function> _ record) AL 
[oer | — e outer lm | 
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可 执行 并 生成 值 。 


短语 


表达 式 为 JavaScript 的 


DET 


] uw 


YE 


] Ww 


abo 


Walle y: 


b 


(dore 


var C 


26 


22 


«« 


[] instanceof ) 


delete 


Lap AT SO ZG i8 13 SALE GS RA Ha FF] AA o 


f 


伪 代 码 拆 解 


function totalEqual(a, b) 4 
if (a fe b 类 型 相同 ) { 
if (a fe b 是 引用 类 型 ) { 
if (a 和 b 是 同一 引用 ) 
return true; 
else 
return false; 
) else ( // 值 类 型 
if (a fe b 值 相 等 ) 
return erue; 
else 
return false; 


} 
} else { 
return false; 
j 
j 
例子 
Var a= 12s; 
Van 0 = "123", 
var c = "4"; 


var aObj = new String("123"); 
var bObj = new String("123"); 
var cObj = aObj; 


a === a0bj // false 
a0bj === bObj // false 
aObj === cObj // true 
a === // true 
a === // false 


== 用 于 判断 操作 符 两 边 的 对 象 或 值 是 否 相等 。 
Oh AR A a AR 


function equal(a, b) 1 
if (a 和 b 类 型 相同 ) { 
return a === b; 
) else { // 类 型 不 同 
return Number(a) === Number(b); // 优先 转换 数值 类 型 


例子 


"99" == 99; // true 

new String("99") == 99; // true 
true == 1; // true 

false == 0; // true 


ENTINIINm = /er Ue 
例外 规则 

e null == undefined 结果 为 虽 true 

e 在 有 null/ undefined 参与 的 == 运算 是 不 进行 隐 式 转换 。 


© == null; // false 
null == false; // false 
"undefined" == undefined; // false 


! 取 反 


Ix 用 于 表达 x 表达 式 的 运行 结果 转换 成 布尔 值 (Boolean) 之 后 取 反 的 结 


Ke iix 则 表示 取 X 表达 Ad 运行 结果 的 布尔 值 。 


var obj = (3; 
var a - !obj // false; 
var a = !!obj // true; 


&& 3 1&5 


X && y 如 果 X 表达 式 的 运行 交 过 转换 成 Boolean 14.4 false 则 不 运行 表达 式 y 


而 直接 返回 X 表达 式 的 运 
值 为 true We à 


伪 代 码 拆 解 


var ret - null; 

if (!!(ret = x)) 1 
return y; 

) else { 
return ret; 


运行 表达 式 y 并 返回 


y 表达 


行 结果 。 相 反 ， 如 果 Xx 表达 式 的 运 


式 的 运行 结果 。 


AT at 


BAT RW 


var a = © && (function(){returm 1 + 1;})(); 77 0 
var b = 1 && (function(){return 1 + 1;})(); // 2 


ELE 


x || d 如 果 X 表达 式 的 运行 
而 直接 回 表达 式 X 的 运算 结 


伪 代 码 拆 解 


var ret - null; 

if (!!(ret = x)) { 
return ret; 

) else { 
return y; 


var a 


var b 


o | |) Chunetion( return dcr 1-0) 42 
T || (funetion() {return 1 + $;5)0); 77 3 


+ 转换 成 Boolean 


结果 转换 为 Boolean 值 为 true， 则 不 运行 RAA y 
(与 && 方式 相反 ) 


元 算 符 优 先 级 (Operator Precedence) 


/ 高 于 && 
e * / matt - 
e && mt ?: 

e () 内 优先 级 高 于 之 外 


e + - d 


NOTE : 和 数学 上 的 算术 优先 级 类 似 ， 同 级 从 左 到 右 计算 。 如 有 疑问 加 上 () B 
可 解决 优先 级 问题 。 


Precedence Operator type Associativity ndun 

19 Grouping n/a ( 
Member Access left-to-right 

18 uL BEES left-to-right EE 
new (with argument list) ^ n/a new .. ( 
Function Call left-to-right a) 

17 is (without argument right-to-left "ew 
Postfix Increment n/a X 

m Postfix Decrement n/a x 
Logical NOT right-to-left l 
Bitwise NOT right-to-left fe 
Unary Plus right-to-left uie 
Unary Negation right-to-left = 

15 Prefix Increment right-to-left ++ 
Prefix Decrement right-to-left EE 
typeof right-to-left typeof .. 
void right-to-left void .. 
delete right-to-left delete .. 
Multiplication left-to-right i 

14 Division left-to-right e o 


13 


12 


11 


10 


A C1 Oo N o O 


Remainder 
Addition 
Subtraction 
Bitwise Left Shift 
Bitwise Right Shift 


Bitwise Unsigned Right 
Shift 


Less Than 

Less Than Or Equal 
Greater Than 

Greater Than Or Equal 
in 

instanceof 


Equality 
Inequality 
Strict Equality 
Strict Inequality 
Bitwise AND 
Bitwise XOR 
Bitwise OR 
Logical AND 
Logical OR 


Conditional 


Assignment 


left-to-right 
left-to-right 
left-to-right 
left-to-right 
left-to-right 


left-to-right 


left-to-right 
left-to-right 
left-to-right 
left-to-right 
left-to-right 


left-to-right 


left-to-right 
left-to-right 
left-to-right 
left-to-right 
left-to-right 
left-to-right 
left-to-right 
left-to-right 
left-to-right 
right-to-left 


right-to-left 


p EE on 


a AN 


instanceof .. 


yield right-to-left yield .. 
Spread n/a 


Comma / Sequence left-to-right ess 


4 


条 件 控制 语句 
其 中 expression 可 以 使 用 整 型 ， 字 符 串 ， 甚 至 表达 式 


if (expressionO) {statementO} 
else if (expression1) {statement1i} 
else (statement2) 


// JavaScript 中 的 case 可 以 使 用 整 型 ， 字 符 串 ， 甚 至 表达 式 
switch(persion.type) { 
case "teacher": 
statement1 
break; 
case "student": 
statement2 
break; 
default: 
statement3 
break; 


循环 控制 语句 


while(expression) {statement} 


// BPRIT-XK 
do (statement) while(expression); 


for (initialise; test expresiion; increment) {statement} 


// 跳 过 下 面 代码 并 进入 下 一 轮 循环 
continue; 


// 退出 当前 循环 
break; 
for-in 


MATRA pU RUE o 


function Car(id, type, color) 4 
this.type - type; 
this.color - color; 
this.id = id; 


var benz = new Car('benz', 'black', 'red'); 
Car.prototype.start = function(){ 
console.log(this.type + ' start'); 


for (var key in benz) { 
console.log(key + ':' benz[key]); 


// 输出 结果 

type:black 

color:red 

id:benz 

start:function (){ 
console.log(this.type * ' start'); 


// 如 不 需 原 型 对 象 上 的 属性 可 以 使 用 hasownProperty 
for (var key in benz) ( 
if (benz.hasOwnProperty(key)) { 
console.log(key + ':' benz[key]); 


// 输出 结果 
type:black 
color:red 

id:benz 


如 不 需 原 型 对 象 上 的 属性 可 以 使 用 hasOwnProperty 


for (var key in benz) ( 
if (benz.hasOwnProperty(key)) (1 
console.log(key + ':' benz[key]); 


} 

/* 输出 结果 
type:black 
color:red 

id:benz */ 


Fe Ab PIB 4 


try{ 
// statements 


throw new Error(); 
catch(e){ 
// statements 


j 
finally( 


// statements 


with 74 4] 
with 3&4] X JavaScript 中 特有 的 语句 形式 ， 它 主要 有 两 个 作用 : 


其 一 ， 其 用 于 缩短 特定 情况 下 必须 书写 的 代码 量 。 它 可 以 暂时 改变 变量 的 作用 域 。 


语句 


// 使 用 with 之 前 

(function(){ 
var x = Math.cos(3 * Math.PI) + Math.sin(Math.LN10); 
var y = Math.tan(14 * Math.E); 

3)0; 


// a with 
(function(){ 
with(Math) { 
var x = cos(3 * PI) + sin(LN10); 
var y = tan(14 * E); 
} 
3)0; 


v Scope Variables 


Y Local 


> this: Window 
x: undefined 
v: undefined 

> Global Window 


v Scope Variables 


P With Block MathConstructor 
—— — — M E ——— 
Y Local 


> arguments: Arguments[0] 
> this: Window 
x: undefined 
y: undefined 
> Global Window 


其 二 ， 改 变 变量 的 作用 域 ， 将 with 语句 中 的 对 象 添加 至 作用 域 链 的 头 部 。 
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frame[1].document.forms[6].name.value = ""; 
frame[1].document.forms[0].address.value = ""; 
frame[i].document.forms[0].email.value = ""; 


with(frame[1].document.[0]) { 
name.value = ""; 
address.value = "" 
email.value = ""; 


缺点 就 是 导致 JavaScript 语句 的 可 执行 性 下 降 ， 所 以 通常 情况 下 因 尽 可 能 的 避免 使 
用 。 


Table of Contents generated with Doc Toc 


e HE 
o 闭 包 的 应 用 
m 保存 变量 现场 
a 封装 


4] & 


e 闭 包 有 函数 和 与 其 相关 的 引用 环境 的 组 合 而 成 

。 闭 包 人 允许 函 数 访问 其 引用 环境 中 的 变量 〈 又 称 自由 变量 ) 

e 广义 上 来 说 ， 所 有 JavaScript 的 函数 都 可 以 成 为 闭 包 ， 因 为 JavaScript 函数 
在 创建 时 保存 了 当前 的 词法 环境 。 


function add() ( 
var i = 0; 
return function() { 
alert(i++); 
} 
} 
var f = add(); 
f(); 
f(); 


闭 包 的 应 用 


保存 变量 现场 


// 错误 方法 
var addHandlers = function(nodes) ( 
for (var i = 0, len = nodes.length; i < len; i++) { 
nodes[i].onclick = function(){ 
alert(i); 


// 正确 方法 
var addHandlers = function(nodes) ( 
var helper - function(i) ( 
return function() { 
alert(i); 


var (var i = 0, len = nodes.length; i < len; i++) ( 
nodes[i].onclick - helper(i); 


p 


// 将 observerList 封装 在 observer 中 
var observer = (function(){ 
var observerList = []; 
return { 
add: function(obj) { 
observerList.push(obj); 
tr 
empty: function() { 
observerList = []; 
ty 
getCount: function() { 
return observerList.length; 
tr 
get: function() { 
return observerList; 


})(); 


Table of Contents generated with Doc Toc 


e 面向 对 象 
o 程序 设计 方法 
m 面向 过 程 
m Uu 
m ThA 
m 基本 特点 
e JavaScript 面向 对 象 
o constructor 
m 自 定义 构造 器 
m 创建 构造 器 的 方法 (3 种 ) 
o this 
m 全 局 环境 中 
m 构造 器 
m SAP 
o this 实例 
o 原型 继承 
o 原型 链 
m 属性 查找 
m 属性 修改 
m 属性 删除 
m Object.create(proto[, propertiesObject]) 
o 面向 对 象 的 应 用 
a 全 局 变量 
m HE 
m 继承 
m 原型 继承 


m 类 继承 


面向 对 象 


TL 序 设计 方 法 


程序 设计 描述 系统 如 何 通 过 程序 来 实现 的 过 程 ， 其 为 一 种 设计 方法 与 语言 实现 无 
常见 的 设计 方法 有 面向 流程 与 面向 对 象 。 


NO 


NO 
` 


面向 对 象 


面向 过 程 


以 程序 的 过 程 为 中 心 ， 采 用 自 定 而 下 逐步 细 化 的 方法 来 实现 。 常 见 的 面向 过 程 语 
有 C ` Fortran ` Pascall ° 


Bi 


Main Program 


Function 1 Function 2 


Function 3 Function 4 





面向 对 象 


将 对 象 作为 程序 的 基本 单元 ， 将 程序 分 解 为 数据 和 操作 的 集合 。 常 见 的 面向 过 程 语 
言 有 smalltalk (#4 Objective-C 的 父亲 ) ` Java ` C++ ° 
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面向 对 象 





Object B 


methods & methods 





Object C 





methods 


概 


B 


e X (Class) ^ *t & (Object) 
e 属性 (Property) ^ Zr iX (Method) 


基本 特点 


e 继承 (Inheritance ) 
e 封装 (Encapsulation) 
e 多 态 (Polymorphism) 


JavaScript 面向 对 象 


constructor 


对 象 的 构造 器 ， 也 可 称 之 为 构造 类 型 。 
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// 使 用 new 关键 字 创 建 
var o = new Object(); 


var a = new Array(); 
var d = new Date(); 


object constructor 


// 使 用 直接 量 创建 
var o = (name: Xinyang 
vara s ky 23]. 


自 定 义 构 造 器 


// constructor 
function Person(name, age, birthdate) ( 
this.name - name; 
this.age - age; 
this.birthdate - birthdate; 
this.changeName - function(newAge) ( 
this.age - newAge; 


// 创建 对 象 
var X = new Person('Stupid', 13, new Date(2015, 01, 01)); 
var Q - new Person('Q', 12, new Date(2015, 01, 01)); 


X.changeName( 'X'); 


创建 构造 器 的 方法 (3 49) 


e function ClassName() {...} 
e var Class = function() {...} 


e var Class = new Function() 


NOTE: 并 不 是 所 有 函数 都 可 以 被 当成 构造 器 ， 例 如 var o = new 


Math.min() 。 通 常 自 定 义 的 函数 均 可 当做 构造 器 来 使 用 。 内 置 对 象 的 构造 


被 当做 构造 器 。 


eR 
zs 


也 可 


NOTE: : 如 果 构 造 器 有 返还 值 并 为 对 象 类 型 ， 则 对 象 将 被 直接 返回 。 


function Person(name, age, birthdate) ( 
this.name - name; 
this.age - age; 
this.birthdate - birthdate; 
this.changeName - function(newAge) ( 
this.age - newAge; 


j 
// M1 EEEXE 
return {}; 


var X = new Person('X', 13, new Date()); 
console.log(X.name); // undefined; 


this 


this 在 不 同 环境 中 指 代 的 对 象 不 同 ( this 指 代 的 值 可 在 函数 运行 过 程 中 发 生 
改变 ) 。 


出 现场 景 所 指 代 值 
全 局 环境 全 局 对 象 (window 在 浏览 器 环境 中 时 ) 
constructor 创建 的 新 实例 对 象 
函数 调用 函数 的 调用 者 
new Function() 全 局 对 象 
eval() 调用 上 下 文中 的 this 
全 局 环境 中 


全 局 环境 中 this 指 代 全 局 对 象 ， 既 window 在 浏览 器 环境 中 。 


// 以 下 的 所 有 this 均 指 代 全 局 对 象 
var a = 10; 
alert(this.a); 


this.b = 20; 
alert(b); 


c = 30; 
alert(this.c); 


构造 器 中 的 this 指 代 的 是 即将 被 创建 出 的 对 象 。 


// constructor 

function Person(name, age, birthdate) { 
// Td fa BP ERR OL EY OT HR 
this.name - name; 
this.age - age; 
this.birthdate - birthdate; 
this.changeName - function(newAge) ( 

this.age - newAge; 


// 创建 对 象 
var X = new Person('Stupid', 13, new Date(2015, 01, 01)); 
var Q - new Person('Q', 12, new Date(2015, 01, 01)); 


X.changeName( 'X'); 


Ad 


函数 中 的 this 指 代 函 数 的 调用 者 。 


^f constructor 
function Person(name, age, birthdate) ( 
// 下 面 的 指 代 即将 被 创建 的 对 象 
this.name = name; 
this.age = age; 
this.birthdate - birthdate; 
this.changeName - function(newAge) ( 
this.age - newAge; 
} 
this.gretting = function() { 
// V1 下 面 这 个 this 指 代 调 用 它 的 对 象 ， 既 上 面 的 
// 上 面 的 gretting 左边 的 this， 既 为 即将 被 创建 的 对 象 
console.log('Hi, I am ' + this.name) 


// 创建 对 象 
var X = new Person('Stupid', 13, new Date(2015, 01, 01)); 


X.changeName('X'); 
X.gretting(); 


NOTE: new Function('console.log(this)') 中 的 this 均 指 代 全 局 对 
Ž ° eval('console.log(this) 则 为 调用 上 下 文 指 代 的 this 。 


this 实例 


下 面 的 例子 使 用 apply 与 call 。 通 过 这 两 个 方法 来 将 一 个 对 象 中 this dà 
代 的 目标 进行 改变 。 


function Point(X, y) 4 


this.x Xe 
y; 


this.move = function(x, y) 4 


this.y 


Chis += Xe 
this.y += y; 


var point = new Point(0, 0); 
point.move(i, 1); 


Var circle = {x2 0, y: 4. re 2}: 


// 改变 point 中 move 方法 this 指 代 的 对 象 至 circle 
point.move.apply(circle, [1, 1]); 

// 同样 可 以 用 类 似 的 call 方法 ， 区 别 为 参数 需 依次 传 入 
point.move.call(circle, 1, 1); 


面向 对 象 





0 2 
var point = new Point (0,0); 





1 2 
point.move[1,1); 





Var circle = (x: by: Lag Wi 





point móve.calilcircle, LAE 
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原型 继承 


使 用 原型 (prototype) 可 以 解决 重复 定义 实例 对 象 拥有 的 完全 一 致 的 属性 或 方法 
( 既 共 享 原型 中 的 属性 或 方法 ) 。 


function Boss() { 
this. 
this. 
this: 
this. 
this: 
this. 


var X 
var Q 


age = 0; 

birthdate = null; 

name = ''; 

tasks = []; 

title = 'Boss'; 

gretting = function() (console.log('I am a Boss!');}; 


new Boss(); 
new Boss(); 


// X 与 Q 中 具有 完全 一 致 (不必 唯一 的 属性 或 方法 ) 
// FAA GAH FERS 
// this.title 4 this.gretting 


改造 后 的 构造 器 


function Boss() { 
this.age - 0; 
this.birthdate - null; 
this.name - ''; 
this.tasks - []; 


j 
Boss.prototype - ( 
title: 'Boss', 
gretting: function(){console.log('I am a Boss!');} 


var X - new Boss(); 
var Q - new Boss(); 


// X 与 Q 中 具有 完全 一 致 (不 必 唯 一 的 属性 或 方法 ) 
// FAA GOH SRD 


// this.title 4 this.gretting 


var X = new Boss(); 
var Q = new Boss(); 


// X 5 Q 拥有 相同 的 原型 Boss.prototype 


原型 链 


使 用 原型 继承 的 方法 会 产生 原型 链 。JavaScript 中 对 于 对 象 的 查找 、 修 改 和 删除 都 
是 通过 原型 链 来 完成 的 。 


判断 属性 是 否 为 对 象 本 身 


objectName.hasOwnProperty('propertyName' ); 
// 返回 布尔 值 true X false 


属性 查找 


对 象 的 属性 查找 会 更 随 原型 链 依次 查找 ， 如 果 在 当前 环境 中 无 法 找到 需要 的 属性 则 
会 继续 向 下 一 层 原型 中 继续 寻找 。 


属性 修改 


在 JavaScript 中 对 于 对 象 属性 的 修改 永远 只 修改 对 象 自身 的 属性 (不 论 是 来 源 于 对 
象 本 身 还 是 对 象 的 原型 ) 。 当 创建 当前 对 象 不 存在 属性 时 《即便 原型 拥有 此 必 
E) ， 也 会 为 此 对 象 增 加 改 属 性 。 


修改 原型 上 的 属性 


修改 原型 属性 会 印象 所 有 被 创建 出 的 对 象 现 有 的 属性 和 方法 。 


ClassName.prototype.propertyName = 'new value'; 
ClassName.prototype.methodName = function(){...}; 


属性 删除 

delete objectName.propertyName 只 可 删除 对 象 自身 的 属性 ， 无 法 删除 对 象 的 
原型 属性 。 

Object.create(proto[, propertiesObject]) 

其 为 ECMAScript 5 中 提出 的 新 建立 对 象 的 方式 。 在 X T EUR IR A898 UL RIA 
向 boss 对 象 ， 并 将 其 设 为 X 对 象 的 原型 。 


var boss = ( 
title: "Boss', 
gretting: function(){console.log('Hi, I am a Boss!');} 


Hh 


var X = Object.create(boss); 
X.gretting(); // Hi, I am a Boss! 


低 版 本 中 实现 Object.create 功能 


此 种 方式 仍 需 使 用 ClassName.prototype 的 方式 来 实现 。 


var clone = (function()( 
var F = function(){}; 
return function(proto) { 
F.prototype - proto; 
return new F(); 


} 
})(); 


面向 对 象 的 应 用 


全 局 变量 


全 局 变量 可 在 程序 任意 位 置 进 行 访问 和 修改 的 变量 。 浊 用 全 局 变量 会 导致 ， 命 名 冲 
突 ， 导 致 程序 不 稳定 


全 局 标量 的 三 种 定义 方法 : 


e var gloablVal = 'value'; ° 
e window.gloablVal = 'value'; 附加 于 window 对 象 上 
e gloablVal = 'value'; 不 使 用 var 关键 字 ， 也 附加 于 windwo 对 象 


NOTE: delete 无 法 删除 在 代码 最 顶端 定义 的 全 局 标量 var globale 


n 


息 隐 藏 可 以 保证 程序 的 稳定 ， 将 内 部 信息 进行 隐藏 。 其 他 语言 中 可 词 用 访问 权限 
RXGARARA > 4% private ^ public ° 


JavaScript 中 的 封装 可 使 用 函数 的 方法 (BE) 。 


// 模拟 private 的 属性 
function ClassName(){ 
var property - ''; 
this.getProperty = function()( 
return property; 


Ig 


// 模拟 protected 属性 ， 使 用 人 为 约束 规则 
var pro = ClassName.prototype; 

pro. protectedMethod = function(){..- .}; 
pro.publicMethod = function(){...}; 


继承 
原型 继承 


原型 继承 的 方式 为 JavaScript 中 国有 的 继承 方式 。 


var proto = T 
actioni: function()(), 
action2: function(){} 


var obj - Object.create(proto); 


在 不 支持 EM5 中 的 实现 方法 : 


var clone = (function()( 
var F = function(){}; 
return function(proto) { 
F.prototype - proto; 
return new F(); 
j 
3); 


类 继承 


面向 对 象 


使 用 原型 链 继承 的 方式 模拟 其 他 语言 类 继承 的 特性 。 


function ClassA() { 
ClassA.classMethod = function(){}; 
ClassA.prototype.api = function(){}; 


function ClassB() { 
ClassA.apply(this, argument); 
} 
ClassB.prototype = new ClassA(); 
ClassB.prototype.constructor - ClassB; 
ClassB.prototype.api = function(){ 
ClassA.prototype.api.apply(this, arguments); 


// CESSA 7 3 9 
// ClassB 为 子 类 


var b = new ClassB(); 
b.api(); 


F D roto ty "— — 
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正则 表达 式 


正则 表达 式 为 标书 字符 串 规则 的 表达 式 。 下 面 为 两 个 例子 为 在 JavaScript 中 的 使 
用 ， 


e /pattern/attrs 
e new RegExp(pattern, attrs) 


488 A 
锚 点 用 于 匹配 一 个 位 置 ， 下 列 为 常用 的 锚 点 


e ^ 起 始 的 位 置 /^http/ 
e $ 结尾 的 位 置 /N.jpg$/ 
e Nb 单词 边界 


字符 类 用 于 匹配 一 类 字符 中 的 一 个 ， 下 面 为 几 个 常用 的 例子 ， 


e [abc] 可 用 于 匹配 a b 还 有 c 
e [0-9] 可 用 于 匹配 一 个 数字 

e [^0-9] 可 用 于 匹配 一 个 非 数 字 

e [a-z] 可 用 于 匹配 一 个 字母 

e. 任意 字符 但 换行 符 除 外 


元 字符 为 具有 特殊 意义 的 字符 。 常 见 的 有 ， 


e ^, $, \b 

e \d 用 于 匹配 数字 [0-9] 

e ND 用 于 匹配 [^X] 

e \s 用 于 匹配 空白 符 

e \S 用 于 匹配 非 空白 符 [^s] 

e WwW 用 于 匹配 任意 单词 字符 (例如 程序 中 的 变量 字符 ) [A-Za-zo-9 ] 


e WW 用 于 匹配 非 单词 字符 [^N] 


量词 
量词 用 于 表现 字符 出 现 的 次 数 。 可 用 的 连词 如 下 ， 

e {m,n} 用 于 表示 出 现 m 到 n 次 之 间 。 

e * 用 于 表示 出 现 9 到 无 穷 之 问 也 就 等 同 于 {0,} 
e ? 用 于 表示 出 现 0 次 到 1 次 也 等 同 于 {0,1} 
e + 用 于 表现 出 现 1 次 以 及 一 次 以 上 也 等 同 于 {1,} 
转移 符 


转 义 符 需要 在 匹配 的 字符 是 元 字符 的 时 候 使 用 。 使 用 \ 来 进行 转移 即 可 。 


多 选 分 支 

多 选 分 支 用 于 表示 或 的 概念 。 /thi(cln)k/ 其 又 等 同 于 /thi[en]k/ 。 其 还 可 
以 用 于 匹配 文件 扩展 名 /N.(pngljpgljpeg|gif)$/ ° 

常用 方法 

测试 : regxObj.test(str) 

其 用 于 测试 正则 表达 式 与 指定 字符 串 是 否 匹配 。 


/123/.test(123); // true 
/123/.test(111); // false 
/123/.test('x123'); // true 


捕获 
其 用 于 保存 所 匹配 到 的 字符 串 为 后 续 开发 所 用 。 () 可 用 于 捕获 ， 正 则 表达 式 再 
运行 时 会 将 其 保存 下 来 ， (?:) 则 不 予 保 存 。 


// str.match(regexp) 


var 
var 


var 
var 
var 
var 
var 
var 


url = 'http://www.google.com/query?test=li-xinyang#cool'; 
reg = /(https?:)\/AZ([^7]+)(\V[^2]*)?(\?2[^#]*)?(#.*)?/; 


arr = url.match(reg); 
protocol = arr[1]; 
host = arr[2]; 
pathname = arr[3]; 
search = arr[4]; 

hash = arr[5]; 


搜索 与 替换 


regexpObj.exec(str) 可 以 提供 更 强大 的 检索 ， 它 可 以 提供 更 详尽 的 结果 
index 也 可 以 提供 过 程 状态 lastIndex ° 


str.r 
TY 


eplace(regex/substr, replacement) 可 以 使 用 正则 表达 式 来 对 字符 串 


换 。 
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DOM 编程 艺术 


DOM 编程 就 是 使 用 W3C 定义 的 API(Application Program Interface) 来 操作 
HTML 文档 (此 处 不 局 限于 HTML， 亦 可 操作 XHTML ^ XML 等 ) ， 使 用 户 可 以 与 
进行 页 面 交互 。 你 需要 了 解 节点 、 属 性 、 样 式 等 基本 DOM 操作 ，DOM 事件 模 
型 ， 数 据 存 储 (Cookie ^ Storage) 与 数据 通信 (Ajax) > JavaScript 动画 ， 音 频 、 视 
频 、Canvas 等 HTML5 特性 ， 表 单 、 列 表 操 作 。 
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文档 树 


Document Object Model (DOM) 为 文档 对 象 模型 ， 它 使 用 对 象 的 表示 方式 来 表示 
对 应 的 文档 结构 及 其 中 的 内 容 。 


下 面 为 一 个 样 例 p 元 素 在 文档 中 的 对 象 所 包含 的 所 有 属性 。 


«p id="target">Hello, World!</p> 


p#targetaccessKey: "" 
align: "" 

attributes: Named 
NodeMapbaseURI: "" 
childElementCount: 0 
childNodes: NodeList[1] 
children: HTMLCollection[0] 
classList: DOMTokenList[0] 
className: "" 
clientHeight: 0 
clientLeft: 0 

clientTop: 0 

clientwidth: 0 
contentEditable: "inherit" 
dataset: DOM 

StringMapdir: "" 
draggable: false 
firstChild: text 
firstElementChild: null 
hidden: false 

id: "target" 


innerHTML: "Hello, World!" 
innerText: "Hello, World!" 
isContentEditable: false 
lang: "" 

lastChild: text 
lastElementChild: null 
localName: "p" 
namespaceURI: "http://www.w3.0rg/1999/xhtm1" 
nextElementSibling: null 
nextSibling: null 
nodeName: "P" 

nodeType: 1 

nodeValue: null 
offsetHeight: 0 
offsetLeft: 0 
offsetParent: null 
offsetTop: 0 

offsetwidth: 0 

onabort: null 
onautocomplete: null 
onautocompleteerror: null 
onbeforecopy: null 
onbeforecut: null 
onbeforepaste: null 
onblur: null 

oncancel: null 

oncanplay: null 
oncanplaythrough: null 
onchange: null 

onclick: null 

onclose: null 
oncontextmenu: null 
oncopy: null 

oncuechange: null 

oncut: null 

ondblclick: null 

ondrag: null 

ondragend: null 
ondragenter: null 
ondragleave: null 


ondragover: null 
ondragstart: null 
ondrop: null 
ondurationchange: null 
onemptied: null 
onended: null 
onerror: null 
onfocus: null 
oninput: null 
oninvalid: null 
onkeydown: null 
onkeypress: null 
onkeyup: null 
onload: null 
onloadeddata: null 
onloadedmetadata: null 
onloadstart: null 
onmousedown: null 
onmouseenter: null 
onmouseleave: null 
onmousemove: null 
onmouseout: null 
onmouseover: null 
onmouseup: null 
onmousewheel: null 
onpaste: null 
onpause: null 
onplay: null 
onplaying: null 
onprogress: null 
onratechange: null 
onreset: null 
onresize: null 
onscroll: null 
onsearch: null 
onseeked: null 
onseeking: null 
onselect: null 
onselectstart: null 
onshow: null 


onstalled: null 

onsubmit: null 

onsuspend: null 

ontimeupdate: null 

ontoggle: null 
onvolumechange: null 
onwaiting: null 
onwebkitfullscreenchange: null 
onwebkitfullscreenerror: null 
onwheel: null 

outerHTML: "<p id="target">Hello, World!</p>" 
outerText: "Hello, World!" 
ownerDocument: document 
parentElement: null 
parentNode: null 

prefix: null 
previousElementSibling: null 
previousSibling: null 
scrollHeight: 0 

scrollLeft: 0 

scrollTop: 0 

scrollwidth: 0 

shadowRoot: null 

spellcheck: true 

style: CSSStyle 
DeclarationtabIndex: -1 


tagName: "P" 
textContent: "Hello, World!" 
titler se 


translate: true 
webkitdropzone: "" 
. proto .: HTMLParagraphElement 


通过 使 用 DOM 提供 的 API (Application Program Interface) 可 以 动态 的 修改 节点 
(node) ， 也 就 是 对 DOM 树 的 直接 操作 。 浏览 器 中 通过 使 用 JavaScript 来 实现 
对 于 DOM 树 的 改动 。 


DOM 包含 


e DOM Core 


e DOM HTML 
e DOM Style 
e DOM Event 


HTML 转换 DOM #4 


<!DOCTYPE html» 
«html lang="en"> 
«head» 
<title>My title</title> 
</head> 
<body> 
<a href="">My Link</a> 
<hi>My header</h1> 
</body> 
</html> 


Root element: 
<html> 













Element: 
<head> 
Element: 
<title> 
Text: 
"My title" 


Element: 
<body> 
Element: Element: 
<a> «hi» 
Text: Text: 
"My link" "My header” 





Attribute: 
“href” 










TARA 


在 元 素 节 点 中 提取 自己 所 需 的 节点 ， 并 了 予以 操作 。 


// Document.getElementsByTagName( ) 
// 更 具 标 签名 找到 目标 节点 的 集合 ， 此 例 中 为 <h1>My header</h1i> 
var node = document.getElementsByTagName( 'h1')[0]; 


// Node.parentNode; 
// 获得 目标 节点 的 父 节 点 ， 此 例 中 为 body 元 素 


node.parentNode; 


// Node.firstChild 
// 获得 目标 节点 的 第 一 个 子 节点 ， 此 例 中 为 "My header" 
node.firstChild; 


// Node.lastChild 
// 获得 目标 节点 的 最 后 一 个 子 节点 ， 此 例 中 为 "My header" 
node.lastChild; 


// Node.previousSibling; 
// 获得 目标 节点 的 前 一 个 相 邻 节点 


node.previousSibling; 


// Node.nextSibling; 
// 获得 目标 节点 的 下 一 个 相 邻 节点 


node.nextSibling; 


-— 


7E 


3x 


+e 
节点 
常用 节点 类 型 


e ELEMENT NODE 可 使 用 Document.createElement('elementName'); 创 


e TEXT NODE 可 使 用 Document.createTextNode('Text Value'); 创建 


e COMMENT NODE 
e DOCUMENT TYPE NODE 


不 同 节点 对 应 的 NodeType 类 型 


此 值 可 以 通过 Node.nodeType 来 获取 。 


节点 编号 节点 名 称 


—_ 


Element 

Attribute 

Text 

CDATA Section 

Entity Reference 
Entity 

Processing Instrucion 


Comment 


oO Oo N Oo a A CO ND 


Document 


T 
e 


Document Type 


— 
一 人 


Document Fragment 


12 Notation 


NOTE : 此 处 需要 清楚 节点 和 元 素 的 区 别 。 我 们 平常 说 的 元 素 其 实 指 的 是 节 
点 中 得 元 素 节点 ， 所 以 说 节点 AS AE ， 节 点 还 包括 文本 节点 、 实 体 节 点 等 。 


元 素 遍 历 


元 素 节点 符合 HTML DOM 树 规则 ， 所 以 它 与 DOM 中 存在 的 节点 相似 。 


«p» 
Hello, 
<em>Xinyang</em>! 
回 到 
«a href="http://1i-xinyang.com"> 
主页 
</a> 


o 


</p> 


下 


// 在 选取 元 素 节 点 后 


p.firstElementChild; // <em>Xinyang</em> 
p.lastElementChild; // «a hrefz"http://li-xinyang.com"» È 
R </a> 


em.nextElementSibling; // «a hrefz"http://li-xinyang.com"» È 
R </a> 


em.previousElementSibling; // "Hello," 
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节点 操作 


因为 DOM 的 存在 ， 这 使 我 们 可 以 通过 JavaScript 来 获取 、 创 建 、 修 改 、 或 删除 节 
点 。 


NOTE: 下 面 提 供 的 例子 中 的 element 均 为 元 素 节点 。 


获取 节点 
父子 关系 


e element.parentNode 
e element.firstChild / element.lastChild 


e element.childNodes / element.children 
兄弟 关系 


e element.previousSibling / element.nextSibling 
e element.previousElementSibling / element.nextElementSibling 


通过 节点 直接 的 关系 获取 节点 会 导致 代码 维护 性 大 大 降低 (节点 之 间 的 关系 变化 会 
直接 影响 到 获取 节点 ) ， 而 通过 接口 则 可 以 有 效 的 解决 此 问题 。 


<!DOCTYPE html» 
«html lang="en"> 
«head» 
«meta charset="UTF-8"> 
«title»ELEMENT NODE & TEXT NODE-/title-» 
</head> 
<body> 
<ul id="ul"> 
<li>First</li> 
<li>Second</1i> 
<li>Third</1i> 
«li»Fourth«c/li» 
«Zub 
<p>Hello</p> 
<script type="text/javascript"> 
var ulNode = document.getElementsByTagName("ul")[0]; 


console.log(ulNode.parentNode); //<body></body> 
console.log(ulNode.previousElementSibling); //null 
console.log(ulNode.nextElementSibling); //<p>Hello</p> 
console. log(ulNode. firstElementChild) ; //«li»First«/li» 
console.log(ulNode.lastElementChild); //<1i>Fourth</1i> 
</script> 
</body> 
</html> 


E af 


NTOE : 细心 地 人 会 发 现 ， 在 节点 遍历 的 例子 中 ，body、ul、li、p 节 点 之 间 是 没有 
空格 的 ， 因 为 如 果 有 空格 ， 那 么 空格 就 会 被 当做 一 个 TEXT 节 点 ， 从 而 用 
ulNode.previousSibling 获 取 到 得 就 是 一 个 空 的 文本 节点 ， 而 不 是 
<li>First</li> 节点 了 。 即 节点 遍历 的 几 个 属性 会 得 到 所 有 的 节点 类 型 ， 而 元 
素 遍 历 只 会 得 到 相对 应 的 元 素 节 点 。 一 般 情况 下 ， 用 得 比较 多 得 还 是 元 素 节点 的 人 遍 
历 属性 。 


实现 浏览 器 兼容 版 的 element.children 


有 一 些 低 版 本 的 浏览 器 并 不 支持 element.children 方法 ， 但 我 们 可 以 用 下 面 的 
方式 来 实现 兼容 。 


«html lang» 
«head» 
<meta charest="utf-8"> 
<title>Compatible Children Method</title> 
</head> 
<body id="body"> 
<div id="item"> 
<div>123</div> 
<p>ppp</p> 
<hi>hi</h1> 
</div> 
<script type="text/javascript"> 
function getElementChildren(e){ 
if(e.children) { 
return e.children; 
jelse( 
/* compatible other browse */ 
var i, len, children - []; 
var child - element.firstChild; 
if(child != element.lastChild)( 
while(child != null)( 
if(child.nodeType == 1)( 
children.push(child); 


} 
child = child.nextSibling; 


n 
telse{ 
children.push(child); 
} 


return children; 


} 
/* Test method getElementChildren(e) */ 


var item - document.getElementById("item"); 

var children - getElementChildren(item); 

for(var i -0; i « children.length; i++){ 
alert(children[i]); 


} 
</script> 
</body> 
</html> 


NOTE : 此 兼容 方法 为 初稿 ， 还 未 进行 兼容 性 测试 。 


接口 获取 元 素 节 点 


e getElementById 

e getElementsByTagName 

e getElementsByClassName 
e querySelector 

e querySelectorAll 


API 只 作用 于 document 唯一 返回 值 live 
getElementByld y V 
getElementsByTagName 
getElementsByClassName Y 
querySelectorAll 
querySelector y 


getElementByld 


获取 文档 中 指定 id 的 节点 对 象 。 


var element = document.getElementById('id'); 


getElementsByTagName 

动态 的 获取 具有 指定 标签 元 素 节点 的 集合 (其 返回 值 会 被 DOM 的 变化 所 影响 ， 其 
值 会 发 生变 化 ) 。 此 接口 可 直接 通过 元 素 而 获取 ， 不 必 直 接 作 用 于 document 之 
上 。 


// 示例 
var collection = element.getElementsByTagName( tagName ); 


// 获取 指定 元 素 的 所 有 节点 


var allNodes = document.getElementsByTagName('*'); 


// 获取 所 有 p 元 素 的 节点 
var elements = document.getElementsByTagName('p'); 
Ns 
var p = elements[0]; 
getElementsByClassName 
获取 指定 元 素 中 具有 指定 class 的 所 有 节点 。 多 个 class 可 的 选择 可 使 用 空 
格 分 隔 ， 与 顺序 无 关 。 


var elements = element.getElementsByClassName('className' ); 


NOTE : IE9 及 一 下 版 本 不 支持 getElementsByClassName 


兼容 方法 


function getElementsByClassName(root, className) ( 
// 特性 侦 测 
if (root.getElementsByClassName) ( 
// 优先 使 用 W3C 规范 接口 
return root.getElementsByClassName(className); 
) else { 
// 获取 所 有 后 代 节 点 
var elements = root.getElementsByTagName('*'); 
var result - []; 
var element - null; 
var classNameStr - null; 
var flag - null; 


className = className.split(' '); 


// 选择 包含 class 的 元 条 
for (var i = 0, element; element = elements[i]; i++) { 
classNameStr = ' ' + element.getAttribute('class') + ' '; 
flag - true; 
for (var j = 0, name; name = className[j]; j++) { 
if (classNameStr.indexOf(' ' + name + ' ') === -1) ( 
flag = false; 
break; 


} 
if (flag) { 
result.push(element); 


} 


return result; 


querySelector / querySelectorAll 


获取 一 个 list (其 返回 结果 不 会 被 之 后 DOM 的 修改 所 影响 ， 获 取 后 不 会 再 变 
化 ) 符合 传 入 的 CSS 选择 器 的 第 一 个 元 素 或 全 部 元 素 。 


var listElementNode - element.querySelector('selector'); 
var listElementsNodes = element.querySelectorAll('selector'); 


var sampleSingleNode = element.querySelector('#className' ); 
var sampleAllNodes = element.querySelectorAll('#className' ); 


NOTE: IE9 一 下 不 支持 querySelector 4 querySelectorAll 
创建 节点 
创建 节点 -> 设置 属性 -> 插入 节点 


var element = document.createElement('tagName'); 


修改 节点 


textContent 


获取 或 设置 节点 以 及 其 后 代 节 点 的 文本 内 容 (对 于 节点 中 的 所 有 文本 内 容 ) 。 


element.textContent; // 获取 
element.textContent = 'New Content'; 


NOTE: 不 支持 IE 9 及 其 一 下 版 本 。 
innerText (不 符合 W3C 规范 ) 


获取 或 设置 节点 以 及 节点 后 代 的 文本 内 容 。 其 作用 于 textcontent. 几乎 一 致 。 


element.innerText; 


NOTE : 不 符合 W3C 规范 ， 不 支持 FireFox 浏览 器 。 


FireFox 兼容 方案 


if (!('innerText' in document.body)) { 
HTMLElement.prototype.  defineGetter J('innerText', function() 


return this.textContent; 


}); 


HTMLElement.prototype.__defineSetter__('innerText', function(s 


at 


return this.textContent = s; 
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appendChild 


在 指定 的 元 素 内 追加 一 个 元 素 节 点 。 


var aChild = element.appendChild(aChild); 


insertBefore 


在 指定 元 素 的 指定 节点 前 插入 指定 的 元 素 。 


var aChild = element.insertBefore(aChild, referenceChild); 


删除 节点 
删除 指定 的 节点 的 子 元 素 节点 。 


var child = element.removeChild(child); 


innerHTML 


获取 或 设置 指定 节点 之 中 所 有 的 HTML 内 容 。 替 换 之 前 内 部 所 有 的 内 容 并 创建 全 新 
的 一 批 节 点 (去除 之 前 添加 的 事件 和 样式 ) 。 innerHTML 不 检查 内 容 ， 直 接 运行 
并 替换 原先 的 内 容 。 


NOTE: 只 建议 在 创建 全 新 的 节点 时 使 用 。 不 可 在 用 户 可 控 的 情况 下 使 用 。 


var elementsHTML = element.innerHTML; 


存在 的 问题 


e 低 版 本 IE 存在 内 存 泄 露 
e 安全 问题 (用 户 可 以 在 名 称 中 和 运行 脚本 代码 ) 
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属性 操作 


HTML 属性 与 DOM 属性 的 对 应 


每 个 HTML 属性 都 会 对 应 相应 的 DOM 对 象 属 性 。 


«div» 

«label for="username">User Name: </label> 

«input type="input" name="username" id="username" class="text" 
value=""> 
</div> 


Ei SSS mi 


input.id; // 'username' 
input.type; // 'text' 
input.className; // 'text' 


label.htmlFor; // 'username' 


属性 操作 方式 


Property Accessor 
通过 属性 方法 符 得 到 的 属性 为 转换 过 的 实例 对 象 〈 并 非 全 字符 串 ) 。 
特点 


e X 通用 行 差 〈 命 名 异常 ， 使 用 不 同 的 命名 方式 进行 访问 ) 


eX A TEX 
e NV 实用 对 象 (取出 后 可 直接 使 用 ) 


读 取 属 性 
«div» 
«label for="username">User Name: </label> 
«input type="input" name="username" id="username" class="text" 


value=""> 
</div> 
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input.className; // 'text' 
input [id]; // 'username' 
写 入 属性 


可 增加 新 的 属性 或 改写 已 有 属性 。 


input.value = 'new value'; 
input[id] - 'new-id'; 


getAttribute / setAttribute 
AT 


e X 仅 可 获取 字符 串 〈 使 用 时 需 转 换 ) 
@ y 通用 性 强 


读 取 属性 


获取 到 的 均 为 属性 的 字符 串 。 


var attribtue = element.getAttribute('attributeName'); 


写 入 属性 


可 增加 新 的 属性 或 改写 已 有 属性 。 


element.setAttribute('attributeName', value); 


dataset 


自 定义 属性 ， 其 为 HTMLElement 上 的 属性 也 是 data-* 的 属性 集 。 主 要 用 于 在 
元 素 上 保存 数据 。 获 取 的 均 为 属性 字符 串 。 数 据 通常 使 用 AJAX 获取 并 存储 在 节点 
之 上 。 


«div id-'user' data-id-'1234' data-username='x' data-email-'mail 
@gmail.com'></div> 


div.dataset.id; LE on PERN 
div.dataset.username; UU UX 
div.dataset.email; // 'mail@gmail.com' 


NOTE: dataset 在 低 版 本 IE 不 可 使 用 ， 但 可 通过 getAttribute 4 
setAttribute 来 做 兼容 。 


样式 操作 
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样式 操作 
通过 JavaScript 动态 修改 页 面 样式 。 


CSS 对 应 DOM 51 € 
















— 











document.styleSheets 


t 


Ca 





getComputedsStyle() 
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«link rel="stylesheet" type="text/css" href="sample.css"> 
// var element = document.querySelector('link'); 
// 对 应 于 element.sheet 


«style type="text/css" media="screen"> 
body { 
margin: 30px 
} 
</style> 
// var element = document.querySelector('style'); 
// 对 应 于 element.sheet 


// 整个 页 面 的 全 部 样式 (不 包括 行内 样式 ) 
document.styleSheets 


<p style="color:red">Text Color</p> 


// var element = document.querySelector('p'); 
// 对 应 于 element.style 


内 部 样式 表 


«style» 

body{margin: 30; } 

p{color: #aaa; line-height: 20px} 
</style> 


// 工 , 对 应 所 有 样式 的 列表 

// body{margin: 30; } 

// p{color: #aaa; line-height :20px} 
element.sheet.cssRules; 


// 2. 对 应 相应 的 CSS 选择 器 
// p 
element.sheet.cssRules[1].selectorText; 


// 3. 对 应 一 个 样式 
// p{color: #aaa; line-height:20px} 
element.sheet.cssRules[1] 


// 4. 对 应 所 有 样式 的 键 值 对 
// color: #aaa; line-height:20px 
element.sheet.cssRules[1].style; 


// 5. 对 应 的 属性 值 
// #aaa 


element.sheet.cssRules[1].stlye.color; 
element.sheet.cssRules[1].lineHeight; 


行内 样式 
其 对 应 于 cssstyleDeclaration 的 对 象 。 


element.style.color; 
// 获取 行内 样式 的 键 值 对 


更 新 样式 


element.style 


element.style.color - 'red'; 
element.style.background - 'black'; 


增加 样式 后 得 到 的 结果 


<div style="color: red; background: black;"»«/div» 


iR 


e 每 个 属性 的 更 新 都 需要 一 个 命令 
e 命名 异常 〈 以 驼峰 命名 法 命名 属性 ) 


element.style.cssText 


一 次 同时 设置 多 个 行内 样式 ， 其 结果 同 element.style 单独 设置 相同 。 
element.style.cssText = 'color: red; background: black'; 
增加 样式 后 得 到 的 结果 
<div style="color: red; background: black;"></div> 
以 上 两 种 方式 均 将 样式 混合 在 逻辑 当中 。 


更 新 class 


首先 需要 创建 对 应 样式 的 CSS 样式 。 


.angry { 
color: red; 
background: black; 


然后 再 在 JavaScript 中 ， 在 对 应 的 事件 中 给 元 素 添加 需要 的 类 即 可 。 


element.className += ' angry'; 
增加 样式 后 得 到 的 结果 
<div class="angry"></div> 


统一 更 新 多 个 元 素 样式 


以 上 方法 均 不 适合 同时 更 新 多 个 样式 ， 通 过 更 换 样式 表 的 方式 则 可 同时 更 改 多 个 页 
面 中 的 样式 。 将 需要 的 大 量 样式 也 在 一 个 皮肤 样式 表 中 ， 通 过 JavaScript 来 直接 更 
换 样 式 表 来 进行 样式 改变 。 (此 方法 也 可 用 于 批量 删除 样式 ) 


«link rel="stylesheet" type="text/css" href="base.css"> 
<link rel="stylesheet" type="text/css" href="style1.css"> 


element.setAttribute('href', 'style2.css'); 


获取 样式 
element.style 
其 对 应 的 为 元 素 的 行内 样式 表 而 不 是 实际 样式 表 。 


«input type="checkbox" name-"" value=""> 


element.style.color; // "" 


line-height: 200px 


window.getComputedStyle() 


将 需要 取出 样式 的 目标 元 素 传 入 window.getComputedStyle() 函数 中 ， 即 可 得 
到 对 应 元 素 的 实际 样式 。 注 意 的 是 这 里 获取 到 的 样式 值 为 只 读 属 性 不 可 修改 ! 


NOTE: 获取 的 实际 为 CSSStyleDeclaration 的 实例 对 象 。 NOTE+: 此 方法 不 
支持 IE9 以 下 版 本 ，IE9 中 需 使 用 element.currentStyle 来 做 兼容 。 


var style = window.getComputedStyle(element[, pseudoEle]); 


<input type="checkbox" name="" value=""> 


window.getComputedStyle(element).color; // 'rgb(0,0,0)' 
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DOM 事件 


何 为 DOM 事件 ，HTML DOM 使 JavaScript 有 能 力 对 HTML 事件 做 出 反应 。 (4 
如 ， 点 击 DOM 元 素 ， 键 盘 被 按 ， 输 入 框 输入 内 容 以 及 页 面 加 载 完 毕 等 ) 


事件 流 


一 个 DOM 事件 可 以 分 为 捕获 过 程 、 触发 过 程 ` Wii o DOM 事件 流 为 
DOM 事件 的 处 理 及 执行 的 过 程 。 下 面 以 一 个 «a» 元 素 被 点 击 为 例 。 
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1. [Æ 2JCapture Phase (事件 捕获 过 程 ) 4 DOM 事件 发 生 时 ， 它 会 从 
Window 节 点 一 路 跑 下 去 直到 触发 事件 元 素 的 父 节 点 为 止 ， 去 捕获 触发 事件 的 元 

2. [4 X: AX]Target Phase (事件 触发 过 程 ) 当 事 件 被 捕获 之 后 就 开始 执行 事件 
绑 定 的 代码 

3. [ 绿 庶 线 ]Bubble Phase 〈 冒 泡 过 程 ) 当 事 件 代码 执行 完毕 后 ， 浏 览 器 会 从 触发 
事件 元 素 的 父 节点 开始 一 直 冒 泡 到 Window 元 素 ( 即 元 素 的 祖先 元 素 也 会 触发 这 
个 元 素 所 触发 的 事件 ) 


关于 捕获 过 程 的 补充 


如 果 有 一 个 支持 三 个 阶段 的 事件 ， 它 一 定 在 触发 时 遵循 下 面 的 顺序 : 


Capture -> Target -> Bubbling 
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Over the River, Dorian 


Shady Grove Aeolian 
Charlie 


使 用 下 面 的 代码 来 举例 : 
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// 添加 Capture 阶 段 事 件 

docuemnt.addEventListener('click',function()( 
alert('capture : '+1); 

}, true); 

tableNode.addEventListener('click', function(){ 
alert('capture: '+2); 

}, true); 

tdNode.addEventListener('click', function(){ 
alert('capture: '+3); 

}, true); 


// 添加 Bubbling 阶 段 事 件 

docuemnt.addEventListener('click',function()( 
alert('bubble: '+1); 

3); 

tableNode.addEventListener('click', function(){ 
alert('bubble: '+2); 

3); 

tdNode.addEventListener('click', function(){ 
alert('bubble : '+3); 


3); 


capture :1 
capture :2 
capture :3 
bubble :3 
bubble : 2 
bubble : 1 


== = om 
ym 


alert bubble 






// 对 document 添 加 了 三 个 bubbling 阶 段 的 事件 
document.addEventListener('click',function()( 
alert(1); 


3); 
document.addEventListener('click',function()( 
alert(2); 


3); 
document.addEventListener('click',function()( 
alert(3); 


3); 


如 上 面 的 代码 所 示 ， 其 为 同一 节点 添加 了 同一 阶段 的 多 个 事件 ， 那 执行 顺序 如 何 
呢 ? 早期 并 没有 规范 定义 ，DOM 3 中 规范 已 经 明确 规定 同一 节点 同一 阶段 的 事件 
应 按照 注册 函数 的 顺序 执行 。 
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在 实际 项 目 过 程 中 ， 某 些 情况 下 比如 若干 的 组 件 或 者 模块 都 需要 监听 某 个 节点 
的 茶 个 事件 ， 但 是 组 件 或 者 模块 的 生成 〈《 即 添加 事件 的 时 机 ) 是 不 一 定 保证 顺 
序 的 ， 所 以 这 个 情况 下 如 果 某 个 组 件 对 这 个 节点 的 这 个 事件 的 优先 级 特别 高 
(需要 保证 必须 先 触发 这 个 组 件 里 的 这 个 事件 ) 而 这 个 平台 又 支持 这 个 阶段 事 
件 的 话 可 以 添加 capture 阶段 事件 ， 用 三 阶段 的 顺序 来 保证 ， 比 如 移动 平台 模 
拟 手 势 的 实现 会 添加 document 上 touchXXX 的 capture 阶段 事件 ， 以 优先 识 
别 手势 操作 当然 实践 过 程 中 考虑 到 不 同 浏览 器 对 三 阶段 支持 的 情况 的 差异 ， 大 
部 分 情况 下 都 采用 的 是 bubbling 阶段 的 事件 


KAK 网易 前 端 工 程 师 





NOTE : 低 版 本 IE 中 并 未 实现 捕获 过 程 。 也 不 是 所 有 事件 均 存 在 这 三 个 完整 的 过 程 
(例如 load 没有 冒 泡 事件 ) 


NOTE+ : 在 这 三 个 阶段 中 无 论 将 事件 捕获 和 事件 处 理 注 册 到 任意 一 个 父 或 祖父 节点 
上 都 会 被 触发 事件 。 

事件 注册 

事件 注册 ， 取 消 以 及 触发 其 作用 对 象 均 为 一 个 DOM 元 素 。 

注册 事件 


eventTarget.addEventListener(type, listener[,useCapture]) 


e evenTarget ARRAS 4F89DOMoG X 
e type 表示 要 绑 定 的 事件 ， 如 : "click" 

e listener 表示 要 绑 定 的 函数 

e useCapture 可 选 参 数 ， 表 示 是 否 捕获 过 程 


NOTE: useCapture 为 设 定 是 否 为 捕获 过 程 ， 默 认 事件 均 为 冒 泡 过 程 ， 只 有 
useCapture A true 时 才 会 局 用 捕获 过 程 。 


// RRL 
var elem = document.getElemenyById('id'); 


// 事件 处 理 函 数 
var clickHandler = function(event) { 
// statements 


m 


// 注册 事件 
elem.addEventListener('click', clickHandler, false); 


// 第 二 种 方式 ， 不 建议 使 用 
elem.onclick = clickHandler; 


// 或 者 来 弥补 只 可 能 发 一 个 处 理 函 数 的 缺陷 
elem.onclick = function(){ 
clickHandler(); 
func(); 
// Fetes 98 HA 
H 


取消 事件 


eventTarget.removeEventListener(type, listener[,useCapture]); 


evenTarget 表示 要 绑 定 事件 的 DOM 元 素 
type 表示 要 绑 定 的 事件 ， 如 : "click" 
listener 表示 要 绑 定 的 函数 

useCapture 可 选 参 数 ， 表 示 是 否 捕获 过 程 


// 获取 元 素 
var elem = document.getElemenyById('id'); 


// 取消 事件 
elem. removeEventListener('click', clickHandler, false); 


// 第 二 种 方式 。 不 建议 使 用 
elem.onclick = null; 


触发 事件 


点 击 元 素 ， 按 下 按键 均 会 触发 DOM 事件 ， 当 然 也 可 以 以 通过 代码 来 触发 事件 。 


eventTarget.dispatchEvent(type); 


// 获取 元 素 


var elem = document.getElemenyById('id'); 


// 触发 事件 
elem.dispatchEvent('click'); 


I € i£ oz 3n 
浏览 器 兼容 型 


以 上 均 为 W3C 定 义 的 标准 定义 ， 但 早期 浏览 器 IES 及 其 以 下 版 本 ， 均 没有 采用 标 
准 的 实现 方式 。 不 过 这 些 低 版 本 浏览 器 也 提供 了 对 于 DOM 事件 的 注册 、 取 消 以 及 
触发 的 实现 。 


事件 注册 与 取消 ，attchEvent/detachEvent 。 事 件 触发 ，fireEvent(e) ， 其 
也 不 存在 捕获 阶段 (Capture Phase) 。 


兼容 低 版 本 代码 实现 


注册 事件 


var addEvent = document.addEventListener ? 
function(elem, type, listener, useCapture) { 
elem.addEventListener(type, listener, useCapture); 
P 
function(elem, type, listener, useCapture) { 
elem.attachEvent('on' + type, listener); 


取消 事件 


var addEvent = document.removeElementListener ? 
function(elem, type, listener, useCapture) { 
elem.removeElementListener(type, listener, useCapture); 
J 
function(elem, type, listener, useCapture) 1 
elem.detachEvent('on' + type, listener); 


事件 对 象 


调用 事件 处 理子 数 时 传 入 的 信息 对 象 ， 这 个 对 象 中 含有 关于 这 个 事件 的 详细 状态 和 
信息 ， 它 就 是 事件 对 象 event 。 其 中 可 能 包含 鼠标 的 位 置 ， 键 盘 信 息 等 。 


// 获取 元 素 


var elem = document.getElemenyById('id'); 


// SPR BR 
var clickHandler = function(event) { 
// statements 


e 


// 注册 事件 
elem.addEventListener('click', clickHandler, false); 


NOTE : 在 低 版 本 IE 中 事件 对 象 是 被 注册 在 window 之 上 而 非 目 标 对 象 上 。 使 用 
下 面 的 兼容 代码 既 可 解决 。 


var elem = document.getElemenyById('id'); 


// FR BB 

var clickHandler = function(event) { 
event = event || window.event; 
// statements 


m 


属性 和 方法 


通用 属性 和 方法 
属性 


e type 事件 类 型 
e target(srcElement IE 低 版 本 ) 事件 触发 节点 
e currentTarget 处 理事 件 的 节点 


方法 


e stopPropagation 阻止 事件 冒 泡 传播 
e preventDefault 阻止 默认 行为 
e stoplmmediatePropagation 阻止 冒 泡 传播 


阻止 事件 传播 


event.stopPropagation() (W3C 规 范 方法 ) ， 如 果 在 当前 节点 已 经 处 理 了 事 
件 ， 则 可 以 阻止 事件 被 冒 泡 传播 至 DOM 树 最 顶端 即 window 对 象 。 


event.stopImmediatePropagation() 此 方法 同上 面 的 方法 类 似 ， 除 了 阻止 将 
事件 冒 泡 传播 值 最 高 的 DOM 元 素 外 ， 还 会 阻止 在 此 事件 后 的 事件 的 触发 。 


event.cancelBubble-true 为 IE 低 版 本 中 中 对 于 阻止 冒 泡 传播 的 实现 。 
阻止 默认 行为 


默认 行为 是 指 浏 览 器 定义 的 默认 行为 (点 击 一 个 链接 的 时 候 ， 链 接 默 认 就 会 打开 。 
当 我 们 双击 文字 的 时 候 ， 文 字 就 会 被 选中 ) ， 比 如 单 击 链接 可 以 打开 新 窗口 。 


Event.preventDefault() 为 W3C 规范 方法 ， 在 IE 中 的 实现 方法 为 
Event.returnValue-false ° 


事件 分 类 


Event 


事件 












click 
dbclick 

mousedown 
mouseenter 
mouseleave 


事件 类 ASR 默认 事 "ma 

load NO Window, Document, Nona window, image, 
Element iframe 

unload NO Bote Moena None window 
Element 

error NO Window, Element None window, image 

select NO Element None input, textarea 

abort NO Window, Element None window, image 

window 


e load 页 面 全 部 加 载 完毕 

e unload 离开 本 页 之 前 的 卸载 
e error Jt d rd 

e abort 取消 加 载 


image 


e load 图 片 加 载 完 毕 
e error 图 标 加 载 错误 
e abort 取消 图 标 加 载 


在 目标 图 标 不 能 正常 载 入 时 ， 载 入 备份 替代 图 来 提供 用 户 体验 。 
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«img src="http://sample.com/img.png" onerror="this.src='http://s 
ample.com/default.png'"» 


UlEvent 
事件 类 型 X WE 元 素 默认 事件 元 素 例 子 
resize NO Window, Element None window, iframe 
scroll NO/YES Document, Element None document, div 


NOTE: resize 为 改变 浏览 器 或 iframe 的 窗 体 大 小 时 会 触发 事件 ， scroll 
则 会 在 滑动 内 容 时 触发 ， 作 用 于 Document 则 不 会 冒 泡 ， 作 用 于 内 部 元 素 则 会 冒 


泡 。 


MouseEvent 


DOM 事件 中 最 常见 的 事件 之 一 。 


事件 类 型 是 否 冒 泡 元 素 默认 事件 元 素 例子 
click YES Element . focus/activation div 
dbclick YES Element . focus/activation/select div 
mousedown YES Element | drag/scroll/text selection div 
mosuemove YES Element None div 
mouseout YES Element None div 
mouseover YES Element None div 
mouseup YES Element context menu div 
mouseenter NO Element None div 
mouseleave NO Element None div 


NOTE: mouseenter 与 mouseover 的 区 别 为 前 者 在 鼠标 在 子 元 素 直 接 移 动 不 
会 触发 事件 ， 而 后 者 会 触发 。 mouseleave 4 mouseout 同上 相似 。 


属性 


e ClientX, clientX 
e ScreenX, screenY 


事件 


e ctriKey, shiftKey, altKey, metaKey 如 果 被 按 下 则 为 真 (true) 
e button(0, 1, 2) 鼠标 的 间 位 





€ Chrome 文件 修改 Wi ”历史 记录 #3 








MouseEvent 顺序 
筷 标 的 移动 过 程 中 会 产生 很 多 事件 。 事 件 的 监察 频率 又 浏览 器 决定 。 


例子 : 从 元 素 A 上 方 移动 过 


mousemove -> mouseover(A) -> mouseenter(A) -> mousemove(A) -> 


mouseout(A) -> mouseleave(A) 
例子 : 点 击 元 素 


mousedown -> [mousemove] -> mouseup -> click 


实例 : 拖 动 元 素 
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«div id="div0"></div> 
«style media="Screen"> 
ZdivO { 

position: absolute; 

top: 0; 

Tert: 0: 

width: 100px; 

height: 100px; 

border: 1px solid black; 


} 
</style> 


var elem = document.getElemenyById('div0'); 
var clientX, clientY, isMoving; 
var mouseDownHandler = function(event) { 
event - event || window.event; 
clientX - event.clientX; 
clientY - event.clientY; 
isMoving - true; 


var mouseMoveHandler = function(event) { 
if (!isMoving) return; 
event - event || window.event; 
var newClientX - event.clientX, 
newClientY - event.clientY; 
var left = parseInt(elem.style.left) || 6, 
top = parseInt(elem.style.top) || 0; 
elem.style.left = left + (newClientX - clientX) + 'px'; 
elem.style.top = top + (newClientY - clientY) + 'px'; 
clientX - newClientX; 
clientY - newClientY; 


var mouseUpHandler = function() { 
isMoving - false; 


addEvent(elem, 'mousedown', mouseDownHandler); 
addEvent(elem, 'mouseup', mouseUpHandler); 
addEvent(elem, 'mousemove', mouseMoveHandler); 


2 48 3 fF (Wheel) 


事件 类 型 是 否 冒 泡 元 素 默认 事件 元 素 例 子 
Wheel YES Element scroll or zoom document div 
属性 


e deltaMode 和 鼠标 滚轮 偏 移 量 的 单位 
e deltaX 


e deltaY 
e deltaZ 
FocusEvent 


其 用 于 处 理 元 素 获得 或 失去 焦点 的 事件 。 (例如 输入 框 的 可 输入 状态 则 为 获得 焦 
点 ， 点 击 外 部 则 失去 焦点 ) 


事件 类 型 是否 冒 泡 m 默认 事件 元 素 例子 

blur NO Window, Element None window, input 
focus NO Window, Element None window, input 
focusin NO window, Element None window, input 
focusout NO window, Element None window, input 


NOTE: blur 失去 焦点 时 ， focus 获得 焦点 时 ， focusin 即将 获得 焦 
点 ， focusout 即将 失去 焦点 。 


属性 


一 个 元 素 失 去 ， 既 另 一 个 元 素 获 得 焦点 。 这 里 的 relatedTarget 则 为 相对 的 那 
个 元 素 。 


e relatedTarget 


InputEvent 


输入 框 输入 内 容 则 会 触发 输入 事件 。 


事件 类 型 是 否 冒 泡 LR 默认 事件 元 素 例子 
beforelnput YES Element update DOM Element input 
input YES Element None input 


NOTE: beforeInput 为 在 按键 按 下 后 即将 将 输入 字符 显示 之 前 生成 的 事件 。 


NOTE+ : IE 并 没有 InputEvent 则 需 使 用 onpropertychange(IE) 来 代替 。 


KeyboardEvent 
其 用 于 处 理 键 盘 事 件 。 


元 素 


事件 类 ”是 否 - " 
型 asa 元 素 默认 事件 例子 
keydown YES Element — beforelnput/input/focus/blur/activation n t 
div, 
keyup YES Element None 
input 


属性 


e key 按 下 的 键 字 符 串 

e code 

e ctriKey, shiftKey, altKey, metaKey 
e repeat 代表 按键 不 松 开 为 true 

e keyCode 

charCode 

e which 


事件 代理 

事件 代理 是 指 在 父 节 点 上 (可 为 元 素 最 近 的 父 节点 也 可 为 上 层 的 其 他 节点 ) 处 理子 
元 素 上 触发 的 事件 ， 其 原理 是 通过 事件 流 机 制 而 完成 的 。 可 以 通过 事件 对 象 中 获取 
到 触发 事件 的 对 象 (如 下 所 示 ) 。 


var elem = document.getElemenyById('id'); 
elem.addEventListener('click', function(event) ( 


var e - event || window.event; 
var target = e.target || e.srcElement; 
// statements 
3); 
优点 


e 需要 管理 的 事件 处 理子 数 更 少 
e 内 存 分 配 更 少 ， 更 高 效 
e. 增加 与 删除 子 节点 可 以 不 额外 处 理事 件 


缺点 


e 事件 管理 的 逻辑 变 的 复杂 (因为 冒 泡 机 制 ) 


多 媒体 〈 视 频 与 音频 ) 
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e 多 媒体 


o 


Oo 


o 


Oo 


基本 用 法 

多 媒体 支持 类 型 
多 媒体 格式 兼容 
HTML 属性 
控制 多 媒体 

多 媒体 相关 事件 
Web Audio API 


乡 媒体 


HTML5 前 的 多 媒体 需要 借助 第 三 方 插件 ， 例 如 Flash， 但 是 HTML5 将 网 页 中 的 多 
媒体 带 入 了 新 的 一 章 。 


多 媒体 和 图 形 编程 


<audio> 


基本 用 法 


<video> 


图 形 编程 


<CanvaS> 
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// 指定 资源 类 型 可 以 帮助 浏览 器 更 快 的 定位 解码 
<audio autobuffer autoloop loop controls> 
<source src="/media/audio.mp3" type="audio/mpeg"> 
«source src="/media/audio.oga"> 
«source src="/media/audio.wav"> 
«object type="audio/x-wav" data="/media/audio.wav" width="290" 
height="45"> 
«param name="src" value="/media/audio.wav"> 
<param name="autoplay" value="false"> 
«param name="autoStart" value="0"> 
<p><a href="/media/audio.wav">Download this audio file.</a></ 
p> 
</object> 
</audio> 


// 视频 
<video autobuffer autoloop loop controls width=320 height=240> 
«source src="/media/video.oga"> 
«source src="/media/video.m4v"> 
<object type="video/ogg" data="/media/video.oga" width="320" h 
eight="240"> 
«param name="src" value="/media/video.oga"> 
<param name="autoplay" value="false"> 
<param name="autoStart" value="0"> 
<p><a href="/media/video.oga">Download this video file.</a></p> 


</object> 
</video> 


[ER 


多 媒体 支持 类 型 


HTML5 支持 音频 列 


HTML5 支持 视频 列 


表 
表 


多 媒体 格式 兼容 


测试 音频 兼容 性 。 


var a = new Audio(); 


a 


LA SW] JH A Æ A) 2 
/ / AST My ae WM AGE 





// 不 支持 - 





a.canPlayType('audio/nav'); 


e 


属性 a 


src X 
controls GF 


autoplay @ 
preload 个 
loop € 


控制 多 媒体 


方法 


none 


false 


e load() 加 载 资 源 
e play() 播放 


e pause() 暂停 播放 


频 与 音频 的 大 部 分 属性 和 方法 几乎 相同 。 


音频 文件 地 址 URL 
显示 控件 
音频 就 绪 后 自动 播放 


可 取 值 为 none、metadata、auto。 音 频 在 页 面 加 载 
是 进行 加 载 ， 并 预备 播放 。 如 果 使 用 autoplay 则 忽略 
该 属性 (该 属性 失效 ) 


是 否 循环 播放 


e playbackRate 1 为 正常 速度 播放 ， 大 于 1 为 快速 播放 最 高 20。 
e currentTime 调 准 播放 时 间 ， 以 秒 为 单位 。 
e volume 取 值 范围 0 到 1 


e muted 21K ta 


e paused 布尔 值 暂停 

e seeking 布尔 值 跳 转 

e ended 布尔 值 播放 完成 

e duration 媒体 时 长 数值 

e initialTime 媒体 开始 时 间 


多 媒体 相关 事件 


e loadstart 开始 请 求 媒体 内 容 

e loadmetadata 媒体 元 数据 以 加 载 完成 (时 长 ， 编 码 格式 等 ) 
e canplay 加 载 一 些 内 容 但 可 播放 

e play 调用 play() 或 设置 autoplay 

e waiting 缓冲 数据 不 够 ， 暂 停 播 放 

playing 正在 进行 播放 


全 部 事件 列表 
事件 列表 


Web Audio API 
音频 W3C 官网 定义 在 过 里 


Mozilla 官方 音频 教程 在 这 ， 以 及 第 三 方 教程 1 和 教程 2。 
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e Canvas 
o id ET xx 
o 绘图 步骤 


Canvas 


Mozilla 官方 <canvas> 教程 在 这 里 。 


画布 «canvas» 的 默认 宽 高 为 300 5 150 ， 但 是 同样 可 以 使 用 CSS 设 定 宽 高 。 
但 因为 CSS 与 JavaScript 在 浑 染 工程 中 有 速度 的 差异 ， 所 以 不 建议 使 用 CSS 对 


«canvas» 的 宽 高 做 设 定 。 


«canvas id="canvasId" width="300" height="150"> 
</canvas> 


ja FEF CHE 


下 面 的 ctx 即 为 泻 汪 上下文 对 象 。 globalcompositeoperation 为 对 于 
canvas 绘画 时 的 泻 沫 属性 设置 ， 具 体 表现 如 下 图 所 示 。 


var canvas = document.getElementById('canvasId'); 
var ctx = canvas.getContext('2d'); 


// 绘画 canvas 的 属性 


ctx.globalCompositeOperation = 'destination-over'; 


Canvas 





source-over source-in source-out source-atop 


destipation-over destination-in destination-out 


清除 画布 





一 个 周期 就 是 完整 的 一 帧 的 绘画 过 程 。 
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* 


var sun - new Image(); 
var moon - new Image(); 
var earth - new Image(); 


funeeron na 


sun.src = 'Canvas sun.png'; 
moon.src - 'Canvas moon.png'; 
earth.src = 'Canvas earth.png'; 


window.requestAnimationFrame(draw); 


function draw(){ 


var ctx = document.getElementById('canvas').getContext('2d'); 


ctx.globalCompositeOperation = 'destination-over'; 
// 清空 画布 内 容 


ctx.clearRect(0, 0, 300, 300); 


ctx.fillStyle = 'rgba(0, 0, 0, 0.4)'; 
ctx.strokeStyle = 'rgba(0, 153, 255, 0.4)'; 


// 保存 画布 状态 
ctx.save(); 
ctx.translate(150, 150); 


// 开始 绘制 图 形 
// 地 球 


var time = new Date(); 
ctx.rotate(((2*Math.PI)/60)* time.getSeconds() + ((2*Math 


.PI)/ 


60000) *time.getMilliseconds()); 
ctx.translate(105, 0); 
// 阴影 
ctx.fillRect(0, -12, 50, 24); 
ctx.drawImage(earth, -12, -12); 


// Ag 

ctx.rotate(((2*Math.PI)/6)*time.getSeconds() + ((2*Math 
00)*time.getMilliseconds()); 

ctx.translate(0, 28.5); 


ctx.drawInmage(moon, -3.5, -3.5); 


// 恢复 画布 状态 


ctx.restore(); 


ctx.beginPath(); 
ctx.arc(150, 150, 105, 0, Math.PI*2, false); 


ctx.stroke(); 


ctx.drawImage(sun, 0, 0, 300, 300); 


window. requestAnimationFrame(draw) ; 


init(); 


.PI)/60 
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e BOM 
o 属性 
m navigator 
m location 
四 方法 
m history 
m 方法 
m screen 
o Window 方法 
o Window 事件 


BOM 


BOM 


ECMAScript 


BOM 为 浏览 器 窗口 对 象 的 一 组 APl。 


BOM 结构 图 
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Browser Object Module(BOM) 





属性 
属性 名 描述 
navigator 浏览 器 信息 
location 浏览 器 定位 和 导航 
history 窗口 浏览 器 历史 
screen 屏幕 信息 
navigator 


navigator.userAgent 


e Chrome, Mozilla/5.0(Windows NT 6.1; WOW64) Apple WebKit/37.36 
(KHTML, like Gecko) Chrome/40.0.2214.115 Safari/537.36 

e Firefox, Mozilla/5.0(Windows NT 6.1; WOW64; rv:36.0) Gecko/20100101 
Firefox/36.0 

e |E, Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 
2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; 
.NETA4.0C; .NET4.0E; InfoPath.3; rv:11.0) like Gecko 


appCodeName: "Mozilla"appName: "Netscape"appVersion: "5.0 (Macin 
tosh; Intel Mac OS X 10 10 3) AppleWebKit/537.36 (KHTML, like Ge 
cko) Chrome/43.0.2357.124 Safari/537.36"cookieEnabled: truedoNot 
Track: "1"geolocation: GeolocationhardwareConcurrency: 8language 

"en-US"languages: Array[4]maxTouchPoints: OmimeTypes: MimeType 
ArrayonLine: truepermissions: Permissionsplatform: "MacIntel"plu 
gins: PluginArrayproduct: "Gecko"productSub: "20030107"serviceWo 
rker: ServiceWorkerContaineruserAgent: "Mozilla/5.0 (Macintosh; 
Intel Mac OS X 10 10 3) AppleWebKit/537.36 (KHTML, like Gecko) C 
hrome/43.0.2357.124 Safari/537.36"vendor: "Google Inc."vendorSub 

""webkitPersistentStorage: DeprecatedStorageQuotawebkitTempora 
ryStorage: DeprecatedStorageQuota proto : Navigator 


NOTE: 可 以 通过 userAgent 判断 浏览 器 。 


location 


代表 浏览 器 的 定位 和 导航 。 可 以 使 用 location 来 操作 URL 中 的 各 个 部 分 。 最 
常用 的 有 href 属性 ， 当 前 访问 资源 的 完整 路 径 。 


http://www.github.com:8080/index.html?user-li-xinyang&lang-zh-CN 
#home 


protocol | | | | 

| 
hostname port | | 

| 

\ / pathname search 
hash 
host 
方法 


e assign(url) 载 入 新 的 Url， 记录 浏览 记录 
e replace(url) 载 入 新 的 url 不 记录 浏览 记录 
e reload() 重新 载 入 当前 页 


history 


浏览 器 当前 窗口 的 浏览 历史 。 


length: 9state: null — proto  . History 


方法 


e back(int) 后 退 
e forward(int) 前 进 
e go(int) 正 数 向 前 ， 附 属 向 后 


Screen 


其 中 包含 屏幕 信息 。 
性 o 


其 中 avil- 


Window 方法 


方法 
alert() , confirm() AmE, prompt() 返回 用 
户 输入 值 
setTimeout() , setInterval() 
open() , close() 
NOTE : 对 话 框 会 阻塞 线程 。 
打开 或 关闭 窗口 
var w - window.open('subwindow.html', 'subwin', 


ht-300, status=yes, resizable=yes'); 


// 既 可 关闭 窗口 


w.close(); 


NOTE: 无 需 记 忆 ， 更 多 属性 在 使 用 时 查询 文档 。 


开头 的 属性 为 可 用 属性 ， 


其 余 则 为 显示 器 设备 属 


描述 
三 种 对 话 框 


计时 器 


开启 窗口 ， 关 闭 
窗口 


'width-300, heig 


Window 事件 


事件 名 描述 
load 文档 和 所 有 图 片 完成 加 载 时 
unload 离开 当前 文档 时 


beforeunload 和 unload 类 似 ， 但 是 它 提供 询问 用 户 是 否 确 认 离 开 的 机 会 
resize 拖 动 改变 浏览 器 窗口 大 小 时 


scroll 拖 动 浏览 器 时 
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数据 通信 


HTTP 


HTTP 为 一 个 通信 协议 。HTTP 客户 端 发 起 请 求 并 创建 端口 。HTTP 服务 器 在 端口 
监听 客户 端的 请 求 。HTTP 服务 器 在 收 到 请 求 后 则 返回 状态 和 所 请 求 的 内 容 。 


网 页 浏览 全 过 程 (粗浅 流程 ) 


1. 域名 解析 
i 搜索 浏览 器 自身 DNS 缓存 
i 搜索 操作 系统 自身 DNS 缓存 (如 上 一 级 未 找到 或 已 失效 ) 
ii. 读 取 本 地 HOST 文件 (如 上 一 级 未 找到 或 已 失效 ， /etc/hosts ) 
iv. 浏览 器 发 起 DNS 系统 调用 请 求 
i ISP 服务 器 查找 自身 缓存 
ii ISP 服务 器 发 起 迭代 ( 乏 域 寻找 需要 的 地 址 ) 请 求 


2. 得 到 请 求 资 源 的 IP 地址 
3. 发 起 HTTP “三 次 握手 " (下 面 为 一 个 超级 简化 版 ) 
建立 连接 ， 等 待 服务 器 确认 
ii， 服 务 器 接受 请 求 ， 回 复 客 户 
ii， 客户 端 与 服务 器 连接 成 功 (TCPI/IP 连接 成 功 ) 
4. 客户 根据 协议 发 送 请 求 
5. 服务 器 更 具 请 求 返回 客户 需求 资源 
6. 客户 获得 资源 


HTTP 事务 





包含 命令 和 URI 的 HTTP 请 求 报 文 


GET /specials/saw-blade.gif HTTP/1.0 
Host: www.joes-hardware.com 


因特网 





HTTP/1.0 200 OK 
Content-type: image/gif 
Content-length: 8572 


客户 端 


www.joes-hardware.com 





包含 事务 结果 的 HITP 响 应 报 文 














HTTP 请 求 报 文 


GET music.163.com HTTP/1.1 


Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 
Accept-Encoding: gzip,deflate,sdch 

Accept-Language: en-US,en;q=0.8,zh-CN;q=0.6,zh;q=0.4 

Cache-Control: no-cache 

Connection: keep-alive 


Cookie: visited-true; playlist265117392DNT:1 

Host: music.163.com 

Pragma: no-cache 

User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) 
Chrome/41.0.2272.118 Safari/537.36 





其 中 包括 主机 地 址 ，HTTP 协议 版 本 号 。 头 部 由 键 值 对 组 成 。 因 为 此 请 求 为 GET 
方法 所 以 请 求 体 为 空 。 


HTTP 回复 报 文 


HTTP/1.1 200 OK 


Cache-Control: no-cache 
Cache-Control: no-store 

Connection: keep-alive 
Content-Encoding: gzip 
Content-Language: en-US 
Content-Type: text/html;charset=utf8 
Date: Fri, 17 Apr 2015 01:48:12 GMT 
Expires: Thu, 01 Jan 1970 00:00:00 GMT 
Pragrma: no-cache 

Server: nginx 

Transfer-Encoding: chunked 

Vary: Accept-Encoding 


«IDOCTYPE html»«html»«head» «/body»«/html» 





其 中 包括 HTTP 版 本 号 ， 状 态 码 及 状态 码 描述 。 头 部 依然 为 键 值 对 组 成 。 主 体 则 为 
HTML 文件 。 


常用 HTTP 方法 


常用 方法 
方法 描述 是 否 包含 主题 
GET 从 服务 器 获取 一 份 文档 € 
POST 向 服务 器 发 送 需要 处 理 的 数据 是 
PUT 将 请 求 的 主题 部 分 储存 在 服务 器 上 是 
DELETE 从 服务 器 删除 一 份 文档 $ 
不 常用 方法 
是 否 包含 
方法 描述 TR 
HEAD 只 从 服务 器 获取 头 文档 的 首部 $ 


TRACE 人 M 


OPTIONS ”决定 可 以 在 服务 器 上 执行 的 方法 个 


URL 构成 


http://www.github.com:8080/index.html?user-li-xinyang&lang-zh-CN 
#home 


| 
protocol | | | | 


hostname port | | 
N "d pathname search 


host 


e port 

e pathname 
e search 

e hash 


NOTE : 上 面 提供 的 URL 地 址 仅 为 参考 所 用 。 


HTTP 版 本 


e HTTP/0.9 1991 年 HTTP 原型 ， 存 在 设计 缺陷 

e HTTP/1.0 第 一 个 广泛 应 用 版 本 

e HTTP/1.0+ 添加 持久 的 keep-alive 链接 ， 虚 拟 主机 支持 ， 代 理 连接 支持 ， 成 为 
非 官方 的 事实 版 本 

e HTTP/1.1 校正 结构 性 缺陷 ， 明 确 语义 ， 引 入 重要 的 新 能 优化 措施 ， 删 除 不 好 
的 特性 (当前 使 用 版 本 ) 


NOTE : 此 文 写 于 2015 年 6 月 。 


常见 HTTP 状态 码 


数据 通信 


描述 


请 求 成 功 ， 一 般 用 于 GET 和 POST 方法 


资源 移动 。 所 请 求 资源 自动 到 新 的 URL， 浏 览 器 自 


动 跳 转 至 新 的 URL 
未 修改 。 所 请 求 资 源 未 修改 ， 
请 求 语法 错误 ， 


浏览 器 读 取 缓 存 数 据 
RA Ei 器 无 法 解析 


未 找到 资源 ， 可 以 设置 个 性 “404 页 面 ” 
服务 器 内 部 错误 














代码 描述 


OK 


Moved 
Permanently 


Not Modified 
Bad Request 
Not Found 


Internal Server 
Error 
































+201 Created 





200 OK 

















202 Accepted 

















x O 2xx 成 功 f 


41203 Non-Authoritative Information 














204 No Content 














Http Status Code | 

















205 Reset Content 
206 Partial Content 
207 Multi-Status 






























































AJAX 


AJAX (Asynchronous JavaScript and HTML) 异步 








James Garrett 在 2005 年 提出 。 


AJAX 请 求全 过 程 





获取 数据 的 概念 ， 


由 Jesse 


302 


数据 通信 


gu 


XHR 


readyState: 0 
status: 
responseText: 


open() 





XHR 
open() send() 


readyState: 2 
status: 
responseText: 





XHR 
i open() send() 1 1 1 












readyState: 3 
status: 
responseText: 


XHR 
n open() 


readyState: 4 
status: 200 
responseText: «!DOCTYPE html» 


303 


AJAX 调用 

三 部 完成 AJAX 调用 
1. 创建 XHR WE 
2. 处 理 返回 数据 及 错误 处 理 
3. 发 送 请 求 


var xhr = new XMLHttpRequest( ); 


xhr.onreadystatechange - function(callback) ( 


if (xhr.readyState === 4) { 
if ((xhr.status >== 200 && xhr.status < 300) || xhr.status = 
== 304) f 
callback(xhr.responseText); 
) else { 
console.error( 'Request was unsuccessful: ' + xhr.status); 
} 
} 


xhr.open('get', 'exmaple.json', true); 
xhr.setRequestHeader('myHeader', 'myValue'); 
xhr.send(null); 


NOTE: xhr.onload 只 针对 当 readyState === 4 和 status === 200 时 
的 事件 。 


open 


xhr.open(method, url[, async = true]); 


e method 为 上 面 说 过 的 HTTP 方法 (H]4e > GET ^ POST) 
e url 为 资源 地 址 
e async RUA? ATTRA AR 


setRequestHeader 


xhr.setRequestHeader('myHeader', 'myValue'); 


xhr.setRequestHeader('Content-Type', 'application/x-www-form-url 
encoded'); 


用 于 设置 头 部 的 键 值 对 。 
send 


xhr.send( [dataznull]); 


xhr.send() 


数据 可 包含 字符 串 或 表单 数控 ， 但 需要 提前 为 RequestHeader 做 设置 。 


xhr.open('get', 'example.json?' + 'name-value&age-value', true); 


对 象 转换 字符 囊 的 函数 实现 


function serialize(data) { 

if (!data) return ''; 

var pairs - []; 

for (var name in data) ( 
if (!data.hasOwnProperty(name)) continue; 
if (typeof data[name] === 'function') continue; 
var value - data[name].toString(); 
name = encodeURIComponent (name); 
value - encodeURIComponent(value); 
pairs.push(name + '-' + value); 

} 


return pairs.join('&'); 


GET 请 求 


var url = 'example.json?' + serialize(formData); 
xhr.open('get', url, true); 
xhr.send(null); 


POST 请 求 


查询 参数 需要 作为 send() 的 存 数 传 入 。 


xhr.open('get', 'example.json', true); 
xhr.send(serialize(formData)); 


同 源 策略 


两 个 页 面 拥有 相同 的 协议 (Protocol) 、 端 口 (Port) 、 和 主机 (host) 那么 这 两 个 
页 面 就 是 属于 同一 个 源 (Origin) 。 


http://www.github.com:8080/index.html?user-li-xinyang&lang-zh-CN 
home 


| | | | | 
| 
protocol | | | | 


hostname port | | 


N if pathname search 


host 


跨 域 资源 访问 


不 满足 同 源 策 略 的 资源 访问 均 属于 跨 域 资源 访问 ，W3C 定义 了 CORS。 现 代 浏 览 
器 已 经 实现 了 CORS 的 支持 。 


CORS 原理 实现 图 


数据 通信 






User Agent 







request to x.y.com 


preflight request 







response preflight request 





exception 












actual request 


response actual request 
exception = 
6 check 








其 他 跨 域 技术 


Frame 代理 


e JSONP 


Comet 


e Web Sockets 


Frame 代理 


KF Frame 代理 的 更 多 内 容 在 这 里 。 


Web APP 


A 





request proxy. frame.html 
x.y.com response proxy_frame.html 
Proxy_frame.html 


request command 


exception request to x.y.com 


=} 
M 
u 
v 
w 
on 
(D 


request callback request data 


优点 : 


9erver 


Server 
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e 参照 CORS 标准 
e 支持 各 种 请 求 方 法 GET POST PUT DELETE 


缺点 : 

e 需要 在 目标 服务 器 防止 代理 文件 (造成 延 时 ) 
e 低 版 本 在 大 并 发 消息 通信 机 制 会 产生 延 时 
JSONP 


全 程 为 JSON with Padding ( 卉 充 式 JSON) ， 它 利用 «script» 可 以 跨 域 的 原 
理 。 请 求 一 段 JavaScript 代码 ， 然 后 执行 JavaScript 代码 来 实现 跨 域 。 


function handleResponse(response) ( 
alert(response.name); 


j 


var script = document.createElement('script'); 
script.src = 'http://localhost:3000/json?callback-handleResponse' 


, 


document.body.insertBefore(script, document.body.firstChild); 


出 = 2] 
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数据 存储 


Cookie 


浏览 器 中 的 Cookie 是 指 小 型 文本 文件 ， 通 常 在 4KB 大 小 左右 。 (由 键 值 对 构成 用 
; AA) 大 部 分 时 候 是 在 服务 器 端 对 Cookie 进行 设置 ， 在 头 文件 中 set- 
Cookie 来 对 Cookie 进行 设置 。 


页 面 可 以 访问 当前 页 的 Cookie 也 可 以 访问 父 域 的 Cookie ° 


属性 
属性 默认 值 作用 
Name (s53&) 名 
Value (s53&) 值 
Domain 当前 文档 域 作用 域 
Path 当前 文档 路 径 作用 路 径 
Expires (1t HR) /Max-Age 〈 毫 秒 数 浏览 器 会 话 时 
值 ) iq 失效 事件 
Secure false 协议 时 生 


作用 域 


数据 存储 


设置 作用 域 


Seen EE 


BER 





设置 作用 路 径 


BER 





读 取 


下 面 转换 Cookie 至 JavaScript 对 象 的 函数 。 
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function getcookie() ( 
var cookie = (3; 
var all - document.cookie; 
if (all === '') return cookie; 
varn list = alksplhit ys 


for (var i = 0, len = list.length; i < len; i++) 


var item = list[i]; 

var p = item.indexOf('z'); 

var name = item.substring(0, p); 
name = decodeURIComponent (name); 
var value = item.substring(p + 1); 
value = decodeURIComponent(value); 
cookie[name] = value; 


} 


return cookie; 


document.cookie = 'name-value'; 


下 面 为 设置 Cookie 值 的 封装 函数 。 


function setCookie(name, value, expires, path, domain, 


secure) { 


var cookie = encodeURIComponent(name) + '=' + encodeURICompone 


nt(value); 
if (expires) 


cookie += '; expires-' + expires.toGMTString(); 


if (path) 

cookie += '; path=' + path; 
if (domain) 

cookie += '; domain=' + domain; 
if (secure) 

cookie += '; secure=' + secure; 
document.cookie = cookie; 


数据 存储 


下 面 为 删除 * Cookie 值 的 函数 


function removeCookie(name, path, domain) { 
document.cookie = 'name=' + name + '; path=' + path + '; domai 
n=' + domain + '; max-age=0'; 


} 


Cookie 缺陷 


e 流量 代价 
e 安全 性 〈 明 文 传 递 ) 
@ 大 小 限制 


Storage 


因为 Cookie 商 端 的 存在 ， 所 以 在 HTML5 中 提供 了 Storage 的 替代 方案 。 


作用 域 的 不 同 Storage 分 为 Local Storage 和 Session Storage， 前 者 在 用 户 不 清理 
的 情况 下 默认 时 间 为 永久 ， 后 者 默认 事件 则 为 浏览 器 的 会 话 时 间 (浏览 器 不 同窗 口 
直接 不 共享 Session Storage) 。 


sessionStorage 


localStorage 


不 同 浏 览 器 对 其 实现 的 不 同 导致 支持 大 小 也 不 太 ， 通 常 在 SMB 作用 。 
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对 象 

读 取 

localStorage.name 

添加 或 修改 

localStorage.name = 'Value'; 
浏览 器 只 支持 字符 串 在 Storage 中 的 存储 。 
删除 


delete localStorage.name 


API 


使 用 API 操作 Storage 可 以 进行 向 下 兼容 的 功能 ， 在 不 支持 的 情况 下 可 以 用 
Cookie 来 代替 。 


e localstorage.length 获取 键 值 对 数量 

e localStorage.getItem('name') 获取 对 应 值 

e localstorage.key(i) 对 应 值 的 索引 获取 

e localStorage.setItem('name', 'value') 设置 键 值 对 
e localStorage.removeItem('name') 删除 一 个 值 

e localStorage.clear() 删除 所 有 数据 


Table of Contents generated with Doc Toc 


e JavaScript 动画 
o 实现 方式 
o JavaScript 动画 三 要 素 
o 定时 器 
o 常见 动画 


o E EX 


JavaScript 动画 


帧 ， 为 动画 的 最 小 单位 ， 一 个 静态 的 图 像 。 帧 频 ， 每 秒 播放 的 帧 的 数量 。 一 个 动画 
是 由 很 多 帧 组 成 的 ， 因 为 人 眼 的 暂 留 特性 ， 当 图 片 交 替 的 速度 大 于 每 秒 30 帧 以 上 
既 有 动画 的 感觉 。 


实现 方式 


e gif 图 像 形式 存储 ， 容 量 大 ， 需 第 三 方 制图 工具 制作 。 
e flash 需要 第 三 方 制作 工具 ， 不 推荐 。 

e CSS3 实现 动画 具有 局 限 性 

e JavaScript 可 实现 大 部 分 上 面 几 类 可 实现 的 动画 效果 


JavaScript 动画 三 要 素 


AP 一 - DOM 
ES 


width 
height 
opacity 


t NL i < HE nues nF o 
Left ji 1 性 d ] he a A requestAnimationFrame 
Hs TE JE H fin 


setinterval 
setTimeout 


定时 器 
setlnterval 


e func 为 执行 改变 属性 的 操作 
e delay 为 出 发 时 间 间 隔 〈 毫 秒 为 单位 ) 
e paral 为 执行 时 可 传 入 改变 属性 函数 的 参数 


var intervalld = setInterval(func, delay[, parami, param2, ...]) 
/ 


clearInterval(intervalld); 


NOTE : 使 用 setInterval 可 以 调用 一 次 定时 器 既 可 实现 连贯 的 动画 。 使 用 
clearInterval 即 可 清除 动画 效果 。 


setTimeout 


e func 为 执行 改变 属性 的 操作 
e delay 为 出 发 时 间 间 隔 (毫秒 为 单位 ) 默认 为 0 
e paral 为 执行 时 可 传 入 改变 属性 函数 的 参数 


var timeoutId = setTimeout(func[, delay, parami, param2, ...]); 
clearTimeout(timeoutId); 


NOTE- 使 用 setTimeout 实现 动画 ， 则 需要 在 动画 每 一 帧 结束 时 再 次 调用 定时 
器 。 但 它 KE AE 余 定 时 器 。 


区 别 


x 


e setTimeout 在 延 时 后 只 执行 一 次 ， setInterval 则 会 每 隔 一 个 延 时 期 间 
后 会 再 执行 。 


requestAnimationFrame 


RMF setTimeout 但 是 无 需 设 定时 间 间 隔 。 此 定时 器 为 HTML5 中 的 新 标准 ， 
其 间隔 时 间 不 由 用 户 控制 ， 而 是 由 显示 器 的 刷新 频率 决定 。 (市 面 上 的 显示 器 刷新 
频率 为 每 秒 刷 新 60 次 ) 


优势 


e 无 需 设 置 间隔 时 间 


var requestId = requestAnimationFrame(func); 
cancelAnimationFrame(requestId); 


NOTE: 使 用 它 来 实现 动画 与 setTimeout 类似， 需要 每 次 每 帧 结束 时 再 次 调 
用 。 不 可 设置 时 间 间 隔 (系统 决定 ) ， 时 间 间 隔 为 16.67 毫 秒 一 帧 。 


常见 动画 

大 多 的 复杂 动画 都 是 有 下 列 的 简单 动画 所 组 成 的 。 
e 形变， 改变 元 素 的 宽 高 

e 位移， 改变 元 素 相 对 位 置 

e 旋转 

e BAR 

e 其 他 
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下 面 的 例子 为 以 px 为 单位 的 动画 代码 


var animation - function(ele, attr, from, to) ( 
var distance - Math.abs(to - from); 
var stepLength - distance/100; 
var sign - (to - from)/distance; 
var offset - 0; 
var step = function(){ 
var tmpOffset = offset + stepLength; 
if (tmpOffset < distance) { 
ele.style[attr] = from + tmpOffset * sign + 'px'; 
offset = tmpOffset; 
} else { 
ele.style[attr] = to + 'px'; 
clearInterval(intervalID); 


} 
ele.style[attr] = from + 'px'; 
var intervalID - setInterval(step, 10); 


表单 操作 


表单 为 页 面 的 主要 组 成 部 分 ， 其 中 包含 许多 的 表单 控件 。 用 户 通 过 控件 提供 数据 并 


提交 给 服务 器 ， 服 务 器 则 做 出 相应 的 处 理 。 而 编写 一 个 正常 工作 的 表单 需要 三 个 部 
分 : 

1. 构建 表单 

2. 服务 器 处 理 (提供 接受 数据 接口 ) 

3. 配置 表单 

构建 表单 








配送 时 间 : | 12:46 x $ | 


acm <p><button>ill 7i] ' «/button»«/p» 





«form» 
«p»«label»4£2 : <input></label></p> 
«p»«label» &ié : «input type="tel"></label></p> 
<p><label># #4 : <input type="email"></label></p> 
<fieldset> 
«legend» 披萨 大 小 </legend> 
<label><input type="radio" name="size"> 小 </label> 
<label><input type="radio" name="size"> 中 </label> 
<label><input type="radio" name="size"> X </label> 
</fieldset> 
<fieldset> 
«legend» 披萨 配料 </legend> 
<label><input type-"checkbox"» &A </input></label> 
<label><input type="checkbox"> +438 </input></label> 
<label><input type="checkbox"> #% </input></label> 
<label><input type="checkbox"> #3% </input></label> 
</fieldset> 
<p><label> 配 送 时 间 : <input type="time" min="11:00" max="2100" st 
ep="900"></label></p> 
«p»«button»4t € 17 #</button></p> 
</form> 


服务 器 处 理 


提供 接口 地 址 (例如 ， https://pizza.example.com/order ， 数 据 格式 
( application/x-www-form-urlencoded )， 还 是 接受 的 参数 信息 (custname、 
custtel ` custemail ^ size ` topping ^ delivery) ° 


数据 命名 需 在 表单 控件 中 注 明 。 
配置 表单 


表单 操作 


<form method="post" 
actions*https://pizza.example.com/order" 
enctype="application/x-www-form-urlencoded*> 


<p><label> <input name=*custname*></ label></p> 
<p><label> : <input type-*tel* name="custtel*></label></p> 
<p><label>f)/ «input type="email" name="*custemail"></label></p> 
«fieldset» 
«legend» « / legend» 
<label> <input type-*radio* name-"size" value="small*> </label> 
*label» <input type="radio” name="size* value="*medius*> </label> 
<label> <input type="radio" name="size* value="large*> </label> 


</Tieldset> 
<Tieldset> 


«legend» | H */legend» 
*label» <input type="checkbox" name=*topping" value="bacon*> </label> 
*label» <input type="checkbox” name="topping" value="cheese"> </label> 
<label> <input type="checkbox" name-*topping" value="onion"> NN </label> 
<label> <input type heckbox* names*topping" value="mushroom*> 月 </label> 
</Tieldset> 
<p><label>i <input type="time* name=*delivery® sin-*11:00* max-*21:00* step="900"></label></p> 
<p><button> </button></p> 
</form> 


<form action="https://pizza.example.com/order" method="post" enc 
type="application/x-www-form-urlencoded"> 
«p»«label»4£2 : «input name="custname"></label></p> 
<p><label>Wt : «input type="tel" name="custtel"></label></p> 
<p><label> ñ : <input type="email" name="custemail"></label></p 


<fieldset> 
«legend» 披萨 大 小 </legend> 
<label><input type="radio" name="size" value-"small"» 小 «/1 
abel» 
<label><input type="radio" name="size" value="medium"> 中 «/ 
label» 
<label><input type="radio" name="size" value-"large"» X «/l 
abel» 
</fieldset> 
<fieldset> 
«legend» 披萨 配料 </legend> 
<label><input type-"checkbox"» € </input></label> 
<label><input type="checkbox"> 358& </input></label> 
<label><input type="checkbox"> #% </input></label> 
<label><input type="Ccheckbox"> #3% </input></label> 
</fieldset> 
<p><label> 配 送 时 间 : <input type="time" min="11:00" max="2100" st 
ep="900"></label></p> 
<p><but ton># X jT #</button></p> 
</form> 


CESE a O gl 
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用 户 所 有 提交 的 信息 需 在 提交 服务 器 前 对 其 进行 验证 从 而 提高 用 户 体验 。 
NOTE: 表单 验证 使 用 require 来 强制 用 户 卉 写 相应 的 信息 。 

内 容 

元 素 


form 元 素 


form 元 素 为 构建 表单 中 最 重要 的 元 素 。 


«form novalidate name="pizza" target="abc" method="post" autocom 
plete="off" accept-charset="utf-8" action="http://pizza.example. 
com/order" enctype="application/x-www- form-urlencoded"> 


其 对 应 的 信息 则 可 以 视 为 


字段 值 
noValidate true 
target abc 
method post 
acceptCharset utf-8 
action http://pizza.example.com/order 
enctype application/x-www-form-urlencoded 
name pizza 
autocomplete off 
NOTE : 前 六 项 为 表单 提交 相关 的 信息 。 


属性 
e name 属性 : 可 以 用 于 获取 表单 节点 元 素 。 


var pizzaForm = document.forms.pizza; 


e autocomplete 属性 : 有 两 个 值 on 5 off ， 在 设置 为 on 时 ， 可 以 自 
动 对 输入 框 进 行 补 全 (之 前 提交 过 的 输入 值 ， 下 图 左 ) 。 


搞 节 预定 表单 撤 萨 预定 表单 
姓名 : | 姓名 : | 
giá: ^^ 电话 : 
邮箱 : genity 邮箱 ; 
拉萨 大 小 一 拉萨 大 小 
小 日 中 日 大 小 日 中 日 大 


NOTE: 在 已 经 设置 autocomplete="off" 时 依然 出 现 提示 框 ， 大 多 数 情况 为 济 
览 器 设置 的 自动 补 全 (可 以 强制 关闭 ， 需 要 时 请 搜索 对 应 的 解决 方案 ) 。 


e elements 属性 :为 一 个 动态 节点 集合 (更 具 DOM 的 变化 进行 变化 ) ， 其 
用 于 归结 该 表单 的 子孙 表单 控件 ( 除 图 标 按钮 外 <input type="image>" ) : 


o button 
o fieldset 
o input 

o keygen 
o object 
o Output 
o select 
o textarea 


此 外 还 有 归属 于 该 表单 的 空间 (依旧 图 片 按键 除外 ) 代码 如 下 所 示 。 
«form id="a"> 


«/form» 
<label><input name="null" form="a"></label> 


e length 属性 : 等 价 于 elements.length 来 用 于 描述 表单 内 节点 集合 的 个 
数 。 


选取 表单 空间 元 素 


«form name="test"> 
«input name="a"> 
«input name="b"> 

«/form» 


选取 name="a" 的 控件 可 以 使 用 下 面 的 方法 : 


testForm.elements[9]; 
testForm.elements['a']; 


// 操作 Form 表单 的 属性 
testForm[0]; 
testForm['a']; 


e form[name] 通过 名 称 作为 索引 时 有 如 下 特点 : 


o 返回 id 或 者 name 为 指定 名 称 的 表单 空间 (图 标 按键 除外 ) 

o 如 果 结 果 为 室 ， 则 返回 id 为 指定 名 称 的 img AR (ATARA P 

示 ) 

o 如 果 有 多 个 同名 元 素 ， 则 返回 的 元 素 为 动态 节点 集合 

o 一 旦 用 指定 名 称 取 过 改元 素 ， 之 后 则 不 论 该 元 素 的 id 或 者 name 如 
何 变 化 ， 只 有 节点 存在 则 均 可 使 用 原名 称 来 继续 获取 改 节点 。 


无 指定 名 称 索 引 范 例 


«form name="test"> 
«img id="a" src="sample.png"> 
</form> 


testForm['a']; // 取得 的 便 是 id A a 的 图 片 元 素 


更 新 名 称 ， 依 然 可 以 获取 节点 范例 


«form name="test"> 
«input name="a"> 
«/form» 


Lp ccm 

testForm['a']; 

Ea 
testForm.elements['a']; 
// 第 二 步 
testForm['a'].name = 'b'; 


«form name="test"> 
«input name="b"/> 


«Hore» testForm[ ʻa’) testForm,elements[ ‘a’ ] 
testForm[‘'a']; o 4 4 
testForm.elements['a']; «input name="b"/> null 
testForm['a'].name = 'b'; 

form 接口 


form 元 素 也 提供 了 一 些 接口 便于 对 其 进行 操作 reset()  submit() 
checkValidity() ° 


可 以 重 置 (reset) 的 元 素 有 下 面 的 几 种 : 


e input 

e keygen 
e Output 
e Select 
e textarea 


当 触 发 表单 reset 事件 时 可 使 用 阻止 该 事件 的 默认 行为 来 取消 重 置 。 而 且 元 素 重 
置 时 将 不 会 再 次 触发 元 素 上 的 change 与 input 事件 。 


2 


e 
ER music 16 9jpg — BEL FERFAL 


<form name="file"> $$ fileForm['image'].value = 
«input type-"file" name="image"> 
</form> f fileForm.reset(); 
label 元 素 


«label for="textId" form="formiId"> 


字段 值 
htmlFor textld 
control HTMLElement#textld 
form HTMLFormElement#formld 


e htmlFor 属性 : 用 于 关联 表单 控件 的 激活 行为 (可 使 点 击 label 与 点 击 表 
单 控件 的 行为 一 致 } ， 可 关联 的 元 素 有 下 列 ( hidden 除外 ) 


o button 

o input 

o keygen 
o meter 

o Output 
o progress 
o select 

o textarea 


自 定 义 文件 提交 控件 样式 
«form class="f-hidden"> QREN 
BERR) *OFERXR <input id-"file" name="image" type="Tile 


1 <1form> 
«label for-"'file" class-'m-upload'»i4ifggia Eris pe: 


e control 属性 : 如 果 指 定 了 for 属性 则 指定 该 for 属性 对 于 id 的 可 
关联 元 素 。 如 果 没 有 指定 for 属性 则 为 第 一 个 可 关联 的 子孙 元 素 。 


«label for="txtId*> label» 


«span id-"'txtId'» only for test content here </span> 


(D ”指定 了 for 属 性 
(2) ”for 属 性 对 应 ID 的 元 素 span 为 非 可 关联 元 素 


G) label.control > null 


可 关联 的 元 素 (只 读 属 性 不 可 在 程序 中 直接 赋值 修改 ) 


e button 
e fieldset 
e input 

e keygen 
e label 

e object 
e Output 
e select 
e textarea 


一 form 属性 : 修改 关联 元 素 所 归属 的 表单 则 可 以 修改 元 素 的 form 属性 为 带 
关联 表单 ld (元 素 中 对 于 的 for 属性 也 应 该 做 对 应 的 修改 ) 。// 这 里 有 一 点 小 问 
题 ， 更 改 form 属 性 之 后 label 并 不 能 自动 绑 定 到 新 表单 对 应 的 元 素 上 


label.setAttribute('form', 'newFormId'); 


input 元 素 
«input type="text"> 
e type 属性 : 可 用 于 控制 控件 的 外 观 以 及 数据 类 型 (RUA text ) ， 在 不 
同 的 浏览 器 不 同 数据 类 型 有 不 同 的 展示 效果 。 
本 地 图 片 预览 示例 


所 需 技术 点 (HTMLInputElement 属 性 ) 


onchange 


accept 


multiple 
files 


«input type="file" accept="image/*" multiple» 


file.addEventListener( 
'change', function(event){ 
var files - Array.prototype.slice.call( 
event.target.files, 0 
); 
files.forEach(function(item)( 
files2dataurl(item, function(url){ 
var image = new Image(); 
parent .appendChild(image); 
image.src = url; 
3); 
3); 
} 
); 
function file2dataurl(file, callback) ( 
if (!window.FileReader) { 
throw 'Browser not support File API !'; 
J 
var reader - new FileReader(); 
reader.readAsDataURL(file); 
reader.onload - function(event) ( 
callback(event.target.result); 


NOTE: accept 所 支持 的 格式 有 audio/*  video/*  image/* 以 及 不 
带 ; 的 MINE Type 类 型 和 . 开头 的 文件 名 后 缓 的 文件 。 多 个 文件 类 型 可 以 使 


select 元 素 
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1 


操作 

gh «select name="course"> 

1. DOM 基 础 «option»if//X1f«/option» 
dae «optgroup label="1. 

: «option value-*1.1*»1 

15 mea <option value="1 
16 RRB <option value="1 

a <option value="1 
22865 «option value="1 
23 事件 应 用 «option value="1 

</optgroup> 


<optgroup label="2. 
<option value="2. 
<option value="2. 
<option value="2.3 


</optgroup> 
</select> 
定 选 项 列表 中 选择 需要 的 选项 。 
主要 的 三 个 子 标签 select 、 optgroup 

e select 具有 的 属性 和 方法 如 下 : 

o name 

o value 

o multiple 


o options (动态 节点 集合 ) 


o selectedOptions (动态 节点 集合 ) 


o Selectedlndex 
o add(element[, before]) (无 指定 
o remove([index]) 

e optgroup 所 具有 的 属性 和 方法 : 


o disabled (分 组 选项 不 可 选 ) 
o label (分 组 说 明 ) 
e option 所 具有 的 属性 和 方法 : 


o disabled 

o label (描述 信息 ) 

o Value (提交 表单 时 的 数据 信息 ) 
text (用 户 看 到 的 文字 ) 

index 


o 


o 


(用 于 选项 


参照 物 则 添加 至 


分 


DOM 基 础 "> 
文档 树 </option> 

,2">1.2 节点 操作 </option> 
.3">1.3 7 408) «/ option» 
.4">1.4 样式 操作 </option> 
.5*»1.5 属性 操作 </option> 
.6">1.6 表单 操作 </option> 


事件 模型 "> 
1*»2.1 
2°>2.2 


PK 


28) 


最 末 


N 


3 «/option» 
HEL HON </option> 
">2.3 事件 应 用 </option> 


option 


o 
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o Selected 
o defaultSelected 


选项 操作 


document.createElement('option') 
MU RES 
new Option([text[, value[, defaultSelected[, selected]]]]) 


添加 选项 


var option = new Option('sample'); 
opt.insertAdjacentElement(option, ' 参 照 元 素 ' ) ; 
// 或 者 


select.add(option, ' 参 照 元 素 !' ) 


opt.parentNode.removeChild(option); 
// 或 者 使 用 它 的 索引 将 其 删除 


select.remove(2); 
级 联 下 列 选 择 器 


所 需 知 识 点 : 


e onchange 
e remove 
e add 


表单 操作 


<form name="course"> 
<select name="chapter"> 
<option>Select0</option> 
</select> 
«select name="Section"> 
<option>Selecti</option> 
</select> 
</form> 
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var chapters - ( 
(text: 1, value: 1}, 
(text: 2, value: 2) 


J; 
var sections = { 
Tf 
text:1.1, value: 1.1 
}, { 
text:1.2, value: 1.2 
il 
PARIET 
text:2.1, value:2.1; 
i] 
J; 


function fillSelect(select, list) { 
for(var i = select.length; i > 0; i--) { 
select.remove(i); 
} 
list.forEach(function(data){ 
var option = new Option(data.text, data.value); 
select.add(option); 


i) 


fileSelect(chapterSelect, chapters); 
chapterSelect .addEventListener ( 
'change', function(event) { 
var value - event.target.value, 
list = sections[value] || []; 
fillSelect(sectionSelect, list); 
} 
); 


textarea 1% 
textarea 具有 的 属性 和 方法 如 下 : 


e name 


e value (用 户 输入 信息 ) 

e select() (全 选 当 前 输入 的 内 容 ) 

e selectionStart (选中 的 内 容 的 起 始 位 置 ， 无 选中 时 返回 当前 光标 所 在 位 置 ) 
e selectionEnd (选中 内 容 结束 位 置 ， 无 选中 时 返回 光标 位 置 ) 

e selectionDirection (选取 方向 forward backward ) 

e setSelectionRange(start, end[, direction]) (使 用 程序 选中 内 容 ) 
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e setRangeText(replacement[, start, end, [mode]]) (设置 内 容 范 围 ) 


selection 


表示 选择 区 域 ， 对 于 input 元 素 同 样 有 效 。 


selectionStart 


| 


The input and textarea ETSI in 
their DOM interfaces for handling their selection: | 


selectionEnd 


selectionDirection 主要 是 用 于 在 使 用 SHIFT 键 与 方向 键 组合 选 取 时 的 选取 方 
向 。 设 置 为 forward 时 选取 移动 的 方向 为 selectionEnd 设置 为 backward 
时 移动 方向 为 selectionstart ° 


@ 输 入 提示 示例 


表单 操作 





OMA BT 

B y ee = |: p oo = 加 x 
这 门 课 程 真 的 很 有 元 喊 ，@ 

e 
授权 方式 > eLALSivi¢t. 
取 it m 览 mz t M 


所 需 知 识 点 : 


e oninput 
e SelectionStart 
e setRangeText 
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textarea.addEventListener( 
'input', function(event) ( 
var target - event.target, 
cursor = target.selectionStart; 
if(target.value.charAt(cursor-1) === '@') { 
doShowAtList (functi=on(name) { 
var end = cursor + name.length; 
target.setRangeText( 
name, cursor, end, 'end' 
); 
3); 


} 
); 


其 他 元 素 


e fieldset 
e button 

e keygen 
e output 

e progress 
e meter 


表单 操作 
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JE 
可 以 被 验证 的 元 素 如 下 所 示 : 】 


e button 
e input 

e select 
e textarea 


以 下 情况 不 可 以 做 验证 


e input 元 素 在 类 型 是 hidden, reset, button 时 
e button 元 素 在 类 型 为 reset, button 时 

e input 与 textarea 当 属 性 为 readonly 时 

e 当 元素 为 datalist 的 子孙 节点 时 

e 当 元 素 被 禁用 时 disabled 的 状态 


属性 


验证 涉及 到 以 下 的 以 下 属性 ， 在 每 一 个 可 以 验证 的 元 素 上 均 可 以 调用 对 于 的 属性 或 
通过 接口 进行 操作 : 


e willValidate (表明 此 元 素 在 表单 提交 时 是 否 会 被 验证 ) 

e checkValidity() 〈《 用 于 验证 元 素 ， 返 回 true 当 验 证 通过 ， 或 者 触发 invalid 事 
件 ) 

e validity (存储 验证 结果 ) 

e validationMessage (显示 验证 异常 信息 ) 

e setCustomValidity(message) ( 自 定义 验证 错误 信息 ) 


表单 操作 





valueMissing 
| typeMismatch 
| patternMismatch 
| tooLong 
| tooShort 
| rangeUnderflow 
| rangeOverflow 
| stepMismatch 
| badinput 
| customError 


valid 
自 定 义 异 常 范例 
涉及 到 的 知识 点 : 


e oninvalid 


e setCustomValidity 


设置 了 required 没 有 value 
value'jtype4 7, Wemail, url 
value 与 pattern 不 匹配 

value 长 度 超过 maxlength 指 定 的 长 度 
value 长 度 小 于 minlength 指 定 的 长 度 
value 值 小 于 min 指 定 的 值 

value 值 大 于 max 指 定 的 值 
value 值 不 符合 step 指 定 的 值 
输入 不 完整 

使 用 setCustomValidity 设 置 了 自 定义 错误 
符合 验证 条 件 


«form action="./api" method="post"> 
<label>Name: «input name="username" required></label> 
<button>submit</button> 


</form> 


input .addEventListener ( 
'invalid', function(event) { 
var target = event.target; 
if (target.validity.valueMissing) { 
target.setCustomValidity('Name is missing'); 


} 
} 
) 


Jof 


禁止 验证 范例 


使 用 form 中 novalidate 属性 来 禁止 表单 提交 的 验证 。 


«form action="./api" method="post" novalidate> 
<label>Mobile: <input name="mobile" type="number"></label> 
<button>submit</button> 

</form> 


提交 

隐 式 提交 

在 操作 过 程 中 通过 控件 的 操作 来 提交 表单 ( 敲 击 回 车 来 提交 表单 ) ， 其 需要 满足 以 
T EH: 

e 表单 有 非 禁用 的 提交 按键 


e 没有 提交 按键 时 ， 不 超过 一 个 类 型 为 text search url email 


password date time number 的 input 元 素 


提交 过 程 分 为 两 个 阶段 ， 第 一 个 阶段 是 更 具 表 单 enctype 指定 的 值 构建 要 提交 的 数 
据 ， 第 二 个 阶段 是 使 用 指定 的 方法 (method) 发 送 数据 到 action 指定 的 目标 。 


构建 提交 数据 ， 从 可 提交 元 素 中 提取 数据 组 成 指定 数据 结构 过 程 (可 提交 元 素 有 


button input keygen object select  textarea ) 
编码 方式 (enctype) 所 支持 的 形式 : 
e application/x-www-form-urlencoded (IRI > XIRENA & 分 隔 的 键 值 对 ) 
e multipart/form-data (IFC 2388 字 节 流 形式 ， 例 如 文件 上 传 所 使 用 的 数据 编码 
形式 ) 
e text/plain ( 回 车 换行 符 分 隔 的 键 值 对 ) 


表单 操作 





«form action="./api" 


method-"post" 


ec 
a 5 >. © 260 /tra1n1n9g/MOOC /DOMMe7t 
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ES cache 
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表单 操作 


«form action="./api" a b c submit 
method-"post" 
enctype-"text/plain" 





特殊 案例 一 
当 一 个 表单 元 素 name="isindex" 并 且 type="text" 而 且 满足 如 下 要 求 时 : 


e 编码 格式 为 application/x-www-form-urlencoded 
e 作为 表单 的 第 一 个 元 素 


则 提交 时 只 发 送 value th > KMS name » 


«form action="./api" method="post"> 
<input name="isindex"> 
<input name="a"> 
<button>submit</button> 











</form> 
post: 
<form action="./api" method="pog Minin 
<p><input name="isindex" /></ 
<p><input name=“a" /»«/ p> 222222222 


<p><button>submit</button></p 
</form> 


submit. 
特殊 案例 二 

当 name="_charset_" 并 且 类 型 为 hidden 时 ， 而 且 满 足 如 下 要 求 时 : 
e 没有 设置 value 值 


则 提交 时 value 自动 使 用 当前 提交 的 字符 集 十 充 。 
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走 DA 
RAF RTF 










POST ^" I ? I rain! > 
MOST: 127.0.0.1: 
user-agent: Moz111a/5$.0 (windows NT 6.2; wWwow64; 


<form action=". ipl method I t? Accept: text/html,application/xhtm]exm],apoplicat 
<input type="hidden" name=" charset. "JAccept-tncodiag: grip. deblate eed 
<p><input nam te! pa 111111 Jeonnect ion: eecalive c 
<p><button>sul t«/button»4 | tee eee 
form> subsit 111111 





submit 接口 

form.submit() 可 以 通过 调用 接口 submit() 直接 提交 表单 ， 在 提交 表单 时 均 
会 触发 一 个 onsubmit 表单 提交 事件 ， 在 这 个 事件 中 women 可 以 做 下 面 的 事 
件 : 


e 提交 前 的 数据 验证 
o 阻止 事件 的 默认 行为 来 取消 表单 的 提交 (例如 当 验 证 失败 时 ) 


form.addEventListener( 
'submit', function(event) ( 
var notValid - false; 
var elements - event.target.elements; 


// 自 定义 验证 
if (notValid) { 


// 取消 提交 
event.preventDefault(); 


无 刷新 表单 提交 范例 
常用 的 方式 是 通过 AJAX 进行 实现 ， 这 里 我 们 使 用 iframe 来 做 中 介 代 理 实现 。 


表单 操作 





Server 





所 需 知 识 点 : 


e form 
e target 
e iframe 


«iframe name="targetFrame" class="f-hidden" style="display:none" 
id="result"> 


<form action="./api" method="post" target="targetFrame"> 
<input name="isindex"> 
<input name="a"> 
<button>submit</button> 

</form> 


一 | 
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var frame = document.getElementById('result'); 
frame.addEventListener( 
'load', function(event) { 
try { 
var result - JSON.parse( 
frame.contentWindow.document.body.textContent 


); 


// 还 原 登 陆 按 钮 状态 


disabledSubmit(false); 


// 识别 登陆 结 采 
if (result.code === 200) ( 
showMessage('j-suc', 'success'); 
form.reset(); 
} 
} catch(ex) { 


// 忽略 操作 


首先 需要 知道 服务 器 端 登陆 接口 的 相关 信息 ， 如 下 所 示 : 


描述 数据 信息 
请 求 地 址 lapi/login 
LES E. telephone 手机 号 码 ; password 密码 MD5 7» € 


返回 结果 code 请 求 状态 ; result 请 求 数 据 结果 





var form = document.forms.loginForm; 


var message = document.getElementById('message!'); 


// 通用 逻辑 封装 
function showMessage(class, message) { 
if(!class) ( 
message.innerHTML = ""; 
message.classList.remove('j-suc'); 
message.classList.remove('j-err'); 
) else { 
message.innerHTML - message; 
message.classList.add(class); 


function invalidInput (node, message) { 
showMessage('j-err', message); 
node.classList.add('j-err'); 
node.focus(); 


function clearInvalid(node)( 
showMessage( ); 
hode.classbist.remove( j-err ); 


function disabledSubmit(disabled) { 
form.loginBtn.disabled = !!disabled; 


var method = !disabled ? 'remove' : 'add'; 
form.loginBtn.classList[method]( 'j-disabled'); 


// 验证 手机 号 码 (系统 自 带 方法 ) 
form.telephone.addEventListener( 
'invalid', function(event) { 
event.preventDefault(); 
invalidInput(form.telephone, ‘invalid mobile number'); 
} 
); 


// ETE Hy 
form.addEventListener( 
'submit', function(event) { 

var input = form.password; 

var password = input.value; 

errorMessage = ''; 

if (password.length < 6) { 

errorMessage = 'password less than 6 char'; 
) else if (!/\d./test(password) || !/[a-z]/i.test(password)) 


errorMessage - 'password must contains number and letter' 


if (!!errorMessage) { 
event .preventDefault(); 
invalidInput(input, errorMessage); 
return; 

} 

// 提交 表单 代码 

ZU 

} 
); 


// 提交 表单 
form.addEventListener( 
'submit', function(event)( 
input.value - md5(password); 
disabledSubmit(true); 


} 
); 


// 状态 恢复 
form.addEventListener( 
'focus', function(event) { 
// 错误 还 原 
clearInvalid(event.target); 
// 还 原 登 陆 按钮 状态 
disabledSubmit(false); 


列表 操作 


ie” AB 
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范例 代码 


数据 结构 


列表 操作 





id 歌曲 标识 
name 歌曲 名 称 
duration 歌曲 时 长 
album 

artist 





id 歌手 标识 id 专辑 标识 
name 歌手 名 称 name 专辑 名 称 


[ 
{ 
Midi 2 2e41934> 
"name": "Good Song", 
"album": { 
Tas! 213502) 
"name": "Good Album" 
3 
atte list eg: 
Meet, c T2S4512. 
"name": "Evil Artist" 
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列表 操作 


«div class="m-plylist m-plylist-sort s-bfc5" id="parent"> 
«div class-"head f-cb"> 
«div class-"fix'» 
«div class-"th col f-pr*></div> 
<div class-"th col o-love"> 
<span class="ico u-icn4 u-icn4-love"></span> 
</div> 
</div> 
«div class="flow f-cb"> 
<div class="th col"> 音 乐 标题 </div> 
«div class="th col*>i </div> 
<div class="th col"> 专 辑 <1div> 
«div class="th col"> 时 长 </div> 
</div> 
</div> 


</div> 
列表 模板 分 离 数 据 和 视图 


<ul> 
{list tracks as track} 
<li class="itm j-item"> 
<span class="ico u-icn4 u-icn4-love*></span> 
<div class="flow f-cb*> 
<div class-'td col title*> 
<a href="/track/${track.id}/* class="tit s-bfc8*>${track.name}</a> 
</div> 
<div class="td col ellipsis'» 
<a href="/artist/${track.artist.id}/* class="s-bfc8">${track.artist.name}</a> 
</div> 
<div class-'td col ellipsis"> 
<a hrefz*/album/S(track.album.id)/" class="s-bfc4*>${track.album.name}</a> 
</div> 
<div class-'td col*>${track.duration|dur2str}</div> 
</div> 
</li> 
{/list} 
</ul> 


绘制 列表 
准备 数据 并 整合 模板 与 数据 
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列表 操作 


function render(parent, list) { 
var ext = { 
dur2str: function(duration) { 
duration = duration/ 1000; 
var m = Math.floor(duration/60), 
s = Math. floor(duration%60) ; 
return (m<10?7'0O':'')+m+':'+(s<107'0':'')+s;5 


}; 
var html = Trimpath.merge( 
tplContent, {tracks:list},ext 


) ; 
parent.insertAdjacentHTML ( 'beforeEnd ' ,htm1) ; 


} 
通过 AJAX 获取 数据 


var xhr = new XMLHttpRequest(); 
xhr.open('GET', '/api/track',true); 
xhr.onload = function(){ 
render ( 
document.getElementById( 'parent'), 
JSON.parse(xhr.responseText) 
); 


, 
xhr.send(null); 
列表 单 选 操作 


parent.addEventListener ( 
‘mousedown' , function(event) { 
var target = getTarget(event); 
if (!!target&&lisSelected(target)&& 
levent.ctrlKey&&!event.shiftKey)( 
clearSelection(); 
appendToSelection(target); 
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列表 多 选 操作 (Control 5 Shift 操作 ) 


parent.addEventListener( 
'mouseup', function(event) ( 
var target - getTarget(event), 
selected = isSelected(target); 
ff Cignte elek 
if (event.button == 2&&selected) { 
return; 
} 
// with control click 
if (event.ctrlKey) { 
!selected?appendToSelection(target):removeFromSelection(ta 
rget); 
} 
// with shift key 
if (event.shiftKey) { 
var list = Array.prototype.slice.call( 
parent.getElementsByTagName('li'), 0 
); 
in (last) 4 
last = getLastElection() || target; 
} 
selectWithRangeFromTo(list, last, target); 
) else { 
last - null; 


} 
); 


FERÀ 
contextmenu 事件 为 右键 菜单 弹出 事件 。 


列表 操作 


parent.addEventListener ( 
'contextmenu ' ,function(event) { 
var target = getTarget(event); 
if (!!target)( 
event.preventDefault(); 
showContextMenu ( 
selection, 
event. pagex, 
event. pageyY 
) ; 


) ; 


列表 操作 


function showContextMenu(selection,left,top)( 
// build menu items 
var actions = [ 
(text: ' 副 除 歌曲 " ,value: 'delete') 
] ; 
if (selection.length--!)( 
actions.push( 
(text: ' 插 入 歌曲 " value: 'insert'), 
(text: ' Adi ih’, value: 'update') 
); 
) 
// show menu 
var menu = getMenu( 
TrimPath.merge( 
tplMenu, {actions:actions} 


) 
) ; 
menu.style.top = top*20*'px'; 
menu.style.left = left*1!0*'px'; 
document.body.appendChild(menu); 


} 
增加 列表 


function insertTrack()( 
showTrackAddForm(function(track)( 
selection[0].insertAdjacentElement( 
'beforeBegin', getTrackItem(track) 
) ; 
}); 
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列表 操作 


var getTrackItem = function(track)( 
var div = document.createElement( 'div'); 
render(div,[track]); 
return div.getElementsByTagName( 1i')[0]; 
}; 


删除 列表 
function removeTrack(){ 


selection. forEach(function(node) { 
node. parentNode.removeChild(node) ; 


}) 

selection = []; 
} 
更 新 列表 


function updateTrack()( 
var node = selection[0]; 
showTrackUpdateForm( 
node, function(track) { 


var list = node.getElementsByTagName( 'a'); 


list[0].textContent 
list[1].textContent 
list[2].textContent 


track.name; 
track.album.name; 
track.artist.name; 


) ; 
} 


更 新 状态 
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列表 操作 


parent.addEventListener( 
'mousedown' , function(event) { 

// love all track 

var target = getTarget(event, 'j-lvbtn'); 

if (!!target)( 
var loved = toggleLove(target) ; 
loved ? loveAll() : unloveAll(); 
return; 

} 

|| love one track 

var target = getTarget(event, 'j-love'); 

if (!!target){ 
toggleLove(target) ; 
syncLoveAllState(); 


编程 方式 
面向 视图 的 操作 方式 ， 即 为 针对 视图 的 直接 编程 (对 DOM 树 进行 直接 的 操作 ) 。 


// verify first name 
pro.onFirstNameChange = function() { 
var firstName = getFromView('firstName'); 
if (this.checkFirstName(firstName) ) { 
this.updateViewPass('firstName'); 
)else( 
this.updateViewFailed('firstName'); 






}; 


8 Controller 


// verify last name 
pro.onLastNameChange - function()( 
var firstName = getFromView( 'lastName'); 
if (this.checkLastName(lastName) ) { 
this.updateViewPass('lastName'); 
)else( 
this.updateViewFailed('lastName'); 
} 


}; 
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GERA OAGNGECT PUER UD a ^ (de E AERA G AE RIR AAIR S SLE UE 


4a JE | IE Rr R3 RB o 


面向 数据 的 操作 方式 ， 视 图 则 被 抽象 为 若干 的 数据 以 及 状态 (后续 所 有 的 操作 都 会 
更 加 数据 模型 而 操作 ) ， 从 而 做 到 视图 模型 层 完 全 自动 化 的 测试 。 


Sample EasyAax-Form 


‘Tews n tor demonwrason purposet Oy any mformeton sbmaed wil not be 


Fev rene 4 

M rame A ma a qure tes 
Pemary emat > A Tan a qure ten 
Secondary emet ¢ 

Phone number ° A Mma a a qun ent 
County LR 4 

Comments 4 

Ir 


Cow, LLL 


County LL 





Tha n for Cemonstraton purposes ony any nformaton submitted wa not te 


Fey rame + 
VM rame PL = 
Primary emat - A To a qnd fend 
Secondary omet 4 
Phone number A Mn a a rund tee 
Country ured mares -sd 














// view model 
this.data - ( 
firstName : ‘a’, 
lastName : 'bcdef', 
status: { 
firstName : STATUS_NOT_CHECK, 
lastName : STATUS_NOT_CHECK 


H 


// view model 


// verify first name 
this.watch('firstName' , function(event) { 
if (self.checkFirstName(this.firstName) ) { 
this.status.firstName = STATUS_PASS; 
)else( 
this.status.firstName - STATUS FAILED; 
} 


p 


// view model 
// verify first name 


// verify last name 
this.watch('lastName' , function(event) { 
if (self.checkLastName(this.lastName) ) { 
this.status.lastName = STATUS_PASS; 
)else( 
this.status.lastName - STATUS FAILED; 
} 


p; 


|] view mod ViewModel 


// verify first name 


// verify last name 
this.watch('lastName',function(event)( 
if (self.checkLastName(this.lastName))( 
this.status.lastName - STATUS PASS; 
}else{ 
this.status.lastName = STATUS_FAILED; 
} 


}); 
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列表 操作 


ViewModel 


// verify first name 


// verify last name 
this.watch('lastName' , function(event) { 
if (self.checkLastName(this.lastName) ) { 
this.status.lastName = STATUS_PASS; 
jelse{ 
this.status.lastName = STATUS_FAILED; 
} 


p; 
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ROR 


页 面 架 构 从 实际 需求 出 发 ， 提 供 多 种 需求 的 多 种 解决 方案 和 优 缺点 ， 各 种 页 面 优 化 
方案 以 及 如 何 为 团队 或 产品 制定 规范 等 ， 帮助 你 完成 产品 的 页 面 架构 ， 进 一 步 提升 
前 端 页 面 技 术 。 


本 章 包 括 布局 解决 方案 、 响 应 式 、 页 面 优 化 、 规 范 与 模块 化 等 。 


CSS Reset 


所 有 的 HTML 标签 在 没有 设置 样式 时 均 被 浏览 器 默认 的 样式 列表 所 装饰 (不 同济 
览 器 默认 样式 有 所 不 同 ) 。CSS 的 样式 重 置 就 是 清楚 浏览 器 的 默认 样式 ， 可 以 理 
解 为 对 于 全 局 的 样式 定义 。 对 于 开发 者 来 言 ， 如 不 重 置 每 一 个 浏览 器 特定 的 默认 样 
式 ， 则 会 在 开发 造成 诸多 的 不 便 。 


在 前 端 开发 过 程 中 做 加 法 ， 远 远 比 做 减法 简单 。 将 所 有 浏览 器 的 默认 样式 统 
一 ， 可 以 使 它们 有 一 个 相同 起 点 。 


一 Li Xinyang 资深 前 端 工程 师 


NOTE : 一 份 CSS Reset 文件 并 不 一 定 适 用 于 所 有 场景 ， 需 要 更 具 需 求 做 出 变通 
( 需 符 合 产品 需求 为 主 ) 。 


NOTE+ : 浏览 器 对 于 控件 的 样式 和 功能 的 特性 支持 也 可 以 重 置 (例如 日 历 ， 清 楚 
输入 框 内 容 按 键 等 ) 。 


NOTE++ : Reset 文件 需 比 页 面 其 他 样式 文件 的 引入 顺序 优先 (优先 级 需 最 高 ) 。 


样式 重 置 前 后 对 比 
样式 重 置 前 


CSS Reset 


pre 
blockquote 

1. olli 

* ulli 


dl dt 
di dd 


table caption 
table thead tr th 
table tbody tr td 
table tfoot tr td 
form 





m fieldset legend 








label input text input button | button button 
SUP time code kbd samp var mark 


样式 重 置 后 


table caption 
table thead tr th 
table tbody tr td 
table tfoot tr td 


form 
fieldset legend 


label input text input button button button select option B 


kbd samp var mark 





textarea 











select option B 





textarea 











del ins @ 





a em strong i b u s small abbr "q" cite dfn sub 


a em strong i b u s small abbr q cite dfn sub sup time code 
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布局 解决 方案 


了 解 CSS 中 属性 的 值 及 其 特性 ， 选 彻 分 析 问 题 和 需求 才 可 以 选择 和 设计 最 适合 的 
布局 解决 方案 。 


居中 布局 
水 平 居中 





子 元 素 于 父 元 素 水 平 居 中 且 其 〈 子 元 素 与 父 元 素 ) 宽度 均 可 变 。 
inline-block + text-align 


«div class="parent"> 
«div class="child">Demo</div> 
«/div» 


«style» 
.Child { 
display: inline-block; 
} 
.parent { 
text-align: center; 


} 
</style> 


优点 


e 兼容 性 佳 (甚至 可 以 兼容 IE6 和 IE7) 


table + margin 


<div class="parent"> 
<div class="child">Demo</div> 
</div> 


<style> 
.Child { 
display: table; 
margin: © auto; 
} 
</style> 


NOTE: display: table 在 表现 上 类 似 block 元 素 ， 但 是 宽度 为 内 容 宽 
优点 
e 无 需 设 置 父 元 素 样 式 (支持 IE8 及 其 以 上 版 本 ) 


NOTE: 兼容 IE 8 一 下 版 本 需要 调整 为 «table» 的 结果 
absolute + transform 


<div class="parent"> 
«div class="child">Demo</div> 
</div> 


<style> 

.parent { 
position: relative; 

} 

.Child { 
position: absolute; 
left: 50%; 
transform: translateX(-5096); 


} 
</style> 


优点 


e 绝对 定位 脱离 文档 流 ， 不 会 对 后 续 元 素 的 布局 造成 影响 。 
缺点 


e transform 为 CSS3 属性 ， 有 兼容 性 问题 
flex + justify-content 


«div class="parent"> 
«div class="child">Demo</div> 
«/div» 


«style» 
.parent { 
display: flex; 
justify-content: center; 


j 
/* 或 者 下 面 的 方法 ， 可 以 达到 一 样 的 效果 */ 
.parent { 
display: flex; 
j 
.Child 4 
margin: © auto; 
j 
</style> 
优点 


e 只 需 设 置 父 节点 属性 ， 无 需 设 置 子 元 素 


e 有 兼容 性 问题 


垂直 居中 





子 元 素 于 父 元 素 重 直 居中 且 其 〈 子 元 素 与 父 元 素 ) 高 度 均 可 变 。 


table-cell + vertical-align 


«div class="parent"> 
«div class="child">Demo</div> 
«/div» 


«style» 
.parent { 
display: table-cell; 
vertical-align: middle; 


} 
</style> 


优点 


e 兼容 性 好 (支持 IE8， 以 下 版 本 需要 调整 页 面 结构 至 table 


absolute + transform 


<div class="parent"> 
<div class="child">Demo</div> 
</div> 


<style> 

.parent { 
position: relative; 

} 

.Child { 
position: absolute; 
top: 50%; 
transform: translateY(-5096); 


} 
</style> 


优点 


o 绝对 定位 脱离 文档 流 ， 不 会 对 后 续 元 素 的 布局 造成 影响 。 但 如 果 绝 对 定位 元 素 


是 唯一 的 元 素 则 父 元 素 也 会 失去 高 度 


缺点 


e transform A CSS3 属性 ， 有 兼容 性 问题 
flex + align-items 


«div class="parent"> 
«div class="child">Demo</div> 
«/div» 


«style» 
.parent ( 
display: flex; 
align-items: center; 


j 
</style> 


e 只 需 设 置 父 节点 属性 ， 无 需 设 置 子 元 素 


e 有 兼容 性 问题 


水 平 与 重 直 居中 





子 元 素 于 父 元 素 垂直 及 水 平 居中 且 其 〈 子 元 素 与 父 元 素 ) 高 度 宽度 均 可 


3 


inline-block + text-align + table-cell + vertical-align 


<div class="parent"> 
<div class="child">Demo</div> 
</div> 


<style> 
parent { 
text-align: center; 
display: table-cell; 
vertical-align: middle; 
} 
.child { 
display: inline-block; 
} 
</style> 


o 


优点 


e 兼容 性 好 
absolute + transform 


«div class="parent"> 
«div class="child">Demo</div> 
«/div» 


<style> 
.parent { 
position: relative; 
} 
.Child { 
position: absolute; 
left: 50%; 
top: 50%; 
transform: translate(-50%, -50%); 
} 


</style> 
优点 

e 绝对 定位 脱离 文档 流 ， 不 会 对 后 续 元 素 的 布局 造成 影响 。 
缺点 


e transform 为 CSS3 属性 ， 有 兼容 性 问题 


flex + justify-content + align-items 


布局 解决 方案 
h BATRA R 


<div class="parent"> 
<div class="child">Demo</div> 
</div> 


<style> 
.parent { 
display: flex; 
justify-content: center; 
align-items: center; 
} 
</style> 


列 布局 在 网 页 中 非常 常见 


= 
x- 
5 
E: 
Sy 
3t 
3y 


多 列 布局 可 以 是 两 列 定 宽 ， 一 列 自 


多 
适应 ， 或 者 多 列 不 定 宽 一 列 自 适应 还 有 等 分 布局 等 。 





float + margin 


«div class="parent"> 
«div class="left"> 
<p>left</p> 
</div> 
<div class="right"> 
<p>right</p> 
<p>right</p> 
</div> 
</div> 


<style> 
.left { 
float: left; 
width: 100px; 
} 
.right { 
margin-left: 100px 
/* 间 距 可 再 加 入 margin-left */ 
} 
</style> 


NOTE : IE 6 中 会 有 3 像素 的 BUG， 解 决 方法 可 以 在 left 加 入 margin- 
left:-3px ° 


float + margin + (fix) 改造 版 


«div class="parent"> 
«div class="left"> 
<p>left</p> 
</div> 
<div class="right-fix"> 
<div class="right"> 
<p>right</p> 
<p>right</p> 
</div> 
</div> 
</div> 


<style> 
.left { 
float: left; 
width: 100px; 
} 
.right-fix { 
float: right; 
width: 100%; 
margin-left: -100px; 
} 
.right { 
margin-left: 100px 
/* 间距 可 再 加 入 margin-left */ 
j 
</style> 


NOTE : 此 方法 不 会 存在 IE 6 中 3 像素 的 BUG， 但 left 不 可 选择 ， 需 要 设置 
.left (position: relative) 来 提高 层级 。 此 方法 可 以 适用 于 多 版 本 浏览 器 
(包括 IEG) 。 缺 点 是 多 余 的 HTML 文本 结构 。 


float + overflow 


«div class="parent"> 
«div class="left"> 


<p>left</p> 
</div> 
<div class="right"> 
<p>right</p> 
<p>right</p> 
</div> 
</div> 
<style> 
left { 
float: left; 
width: 100px; 
} 
.right { 
overflow: hidden; 
} 
</style> 


设置 overflow: hidden 会 触发 BFC 模式 (Block Formatting Context) 块 级 格 
式 化 文本 。 BFC 中 的 内 容 与 外 界 的 元 素 是 隔离 的 。 


优点 
。 样式 简单 
缺点 


e 不 支持 IE 6 


table 


«div class="parent"> 
«div class="left"> 
<p>left</p> 
</div> 
<div class="right"> 
<p>right</p> 
<p>right</p> 
</div> 
</div> 


<style> 
.parent { 
display: table; 
width: 100%; 
table-layout: fixed; 
} 
.left { 
display: table-cell; 
width: 100px; 
} 
.right { 
display: table-cell; 
/* 宽 度 为 剩余 宽度 */ 
} 
</style> 


table 的 显示 特性 为 每 列 的 单元 格 宽度 合 一 定 等 与 表格 宽度 。 table-layout: 
fixed; ”可 加 速 演 染 ， 也 是 设 定 布局 优先 。 

NOTE: table-cell 中 不 可 以 设置 margin 但 是 可 以 通过 padding 来 设置 
la] $E. © 


flex 


«div class="parent"> 
«div class="left"> 


<p>left</p> 
</div> 
<div class="right"> 
<p>right</p> 
<p>right</p> 
</div> 
</div> 
<style> 
.parent { 
display: flex; 
} 
.left { 


width: 100px; 
margin-left: 20px; 
} 
.right { 
Flex 1; 
ius. E a 
/"Tlexs, 1 1.0757 
} 


</style> 
NOTE: flex-item 默认 为 内 容 宽度 。 
缺点 
e. 低 版 本 浏览 器 兼容 问题 
合 


e 性 能 问题 ， 只 适合 小 范围 布局 。 


两 列 定 蜗 ， 一 列 目 适 应 





«div class="parent"> 
«div class="left"> 
<p>left</p> 
</div> 
<div class="center"> 
<p>center<p> 
</div> 
<div class="right"> 
<p>right</p> 
<p>right</p> 
</div> 
</div> 


<style> 
.left, .center ( 
float: left; 
width: 100px; 
margin-right: 20px; 
} 
.right { 
overflow: hidden; 
"s 
(less aL dL (Onw7 
} 
</style> 


多 列 定 宽 的 实现 可 以 更 具 单列 定 宽 的 例子 进行 修改 与 实现 。 
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一 列 不 定 宽 加 一 列 自 适应 





不 定 宽 的 宽度 为 内 容 决定 ， 下 面 为 可 以 实现 此 效果 的 方法 : 


e float + overflow ， 此 方法 在 IEG 中 有 兼容 性 问题 
e table ， 此 方法 在 IE6 中 有 兼容 性 问题 
e flex ， 此 方法 在 IE9 及 其 以 下 版 本 中 有 兼容 性 问题 


多 列 不 定 宽 加 一 列 自 适应 


mm = 
AED 





其 解决 方案 同一 列 不 定 宽 加 一 列 自 适应 相仿 。 


多 列 等 分 布局 
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布局 解决 方案 





每 一 列 的 宽度 和 间距 均 相 等 ， 下 面 为 多 列 等 分 布局 的 布局 特定 。 


C 
人 





... 





of 








si vi Rod Ld 


f y 
W G W G W G W 


父 容器 宽度 为 C，C=WrN+GrN-G=> C+G=(W+G) *N° 


25% 825% 29% 825% 





25% 


«div class="parent"> 
«div class="column"> 
<p>1</p> 
</div> 
<div class="column"> 
<p>2</p> 
</div> 
<div class="column"> 
<p>3</p> 
</div> 
<div class="column"> 
<p>4</p> 
</div> 
</div> 
«style media="Screen"> 
.parent { 
margin-left: -20px; 
} 
.column { 
float: left; 
width: 2596; 
padding-left: 20px; 
box-sizing: border-box; 
} 
</style> 


NOTE : 此 方法 可 以 完美 兼容 IE8 以 上 版 本 。 NOTE+ : 此 方法 结构 和 样式 具有 者 
合 性 。 


table 


«div class-'parent-fix'» 
«div class="parent"> 
«div class="column"> 
<p>1</p> 
</div> 
<div class="column"> 
<p>2</p> 
</div> 
<div class="column"> 
<p>3</p> 
</div> 
<div class="column"> 
<p>4</p> 
</div> 
</div> 
</div> 


«style media="Screen"> 
.parent-fix { 
margin-left: -20px; 
} 
.parent { 
display: table; 
width: 100%; 
/* 可 以 布局 优先 ， 也 可 以 单元 格 宽度 平分 在 没有 设置 的 情况 下 */ 
table-layout: fixed; 
} 
.column { 
display: table-cell; 
padding-left: 20px; 
} 
</style> 


NOTE : 缺点 是 多 了 文本 结果 


flex 


«div class="parent"> 
«div class="column"> 
<p>1</p> 
</div> 
<div class="column"> 
<p>2</p> 
</div> 
<div class="column"> 
<p>3</p> 
</div> 
<div class="column"> 
<p>4</p> 
</div> 
</div> 


«style media="Screen"> 


.parent { 
display: flex; 

} 

.column { 
peiit Flex: 1 i Oe 7 
flex: mT: 

} 


.column+.column { 
margin-left: 20px; 


} 
</style> 


NOTE: flex 的 特性 为 分 配 剩余 空间 。 NOTE+ : 兼容 性 有 问题 。 


# 


布局 解决 方案 


Hello World 
Hello World 
Hello World 


Hello World Hello World Hello World 
Hello World Hello World Hello World 
Hello World Hello World Hello World 


Hello World Hello World Hello World 
Hello World Hello World Hello World 
Hello World Hello World Hello World 





table 


table 的 特性 为 每 列 等 帘 ， 每 行 等 高 可 以 用 于 解决 此 需求 。 


«div class="parent"> 
«div class="left"> 
<p>left</p> 
</div> 
<div class="right"> 
<p>right</p> 
<p>right</p> 
</div> 
</div> 


<style> 
.parent { 
display: table; 
width: 100%; 
table-layout: fixed; 
J 
.left { 
display: table-cell; 
width: 100px; 
} 
.right ( 
display: table-cell; 
/* 宽 度 为 剩余 宽度 */ 
} 
</style> 





flex 


«div class="parent"> 
«div class="left"> 


<p>left</p> 
</div> 
<div class="right"> 
<p>right</p> 
<p>right</p> 
</div> 
</div> 
<style> 
.parent { 
display: flex; 
} 
.left { 


width: 100px; 
margin-left: 20px; 
} 
.right { 
flex: 4: 
oa | eal 
JI Gl al (9p 
} 
</style> 


NOTE : flex 默认 的 align-items 的 值 为 


float 


stretch 


o 


«div class="parent"> 
«div class="left"> 
<p>left</p> 
</div> 
<div class="right"> 
<p>right</p> 
<p>right</p> 
</div> 
</div> 


<style> 
.parent { 
overflow: hidden; 
} 
.left, 
.right { 
padding-bottom: 9999px; 
margin-bottom: -9999px; 
} 
.left ( 
float: left; 
width: 100px; 
margin-right: 20px; 
} 
.right { 
overflow: hidden; 


} 
</style> 


3 


NOTE : 此 方法 为 伪 等 高 (只 有 背景 显示 高 度 相 等 ) > EGRE 


等 。NOTE+ : 此 方法 兼容 性 较 好 。 


全 屏 布局 


度 其 实 不 相 


布局 解决 方案 








例如 管理 系统 ， 监 控 与 统计 平台 均 广泛 的 使 用 全 屏 布 局 。 


e 
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JE (100px) 


XE Ba (200px) 


实现 方案 


I=} [pK I 


(SOpx) 





at A} 


e Position 常规 方案 
e Flex CSS3 新 实现 


Position 


«div class="parent"> 
«div class="top"></div> 
«div class="left"></div> 
«div class="right"> 
/ * 辅助 结 构 用 于 滚动 */ 
«div class="inner"></div> 
</div> 
<div class="bottom"></div> 
</div> 
<style> 
html, 
body, 
.parent { 
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height: 100%; 
/* 用 于 隐藏 滚动 条 */ 
overflo: hidden; 

} 

‘top { 
/* 相 对 于 body 定位 */ 
position: absolute; 
top: 0; 
Lert: 0; 
pignit: mo; 
height: 100px; 

} 

.left { 
position: absolute; 
left: 0; 
top: 100px; 
bottom: 50px; 
width: 200px; 

} 

.right { 
position: absolute; 
left: 200px; 
Ludi: 
top: 100px; 
bottom: 50px; 
overflow: auto; 

} 

.right .inner ( 
/* 此 样式 为 演示 所 有 */ 
min-height: 1000px; 

} 

.bottom { 
position: absolute; 
left: Tor 
rignt- 0 
bottom: 0; 
height: 50px; 

} 

</style> 


Position 兼容 


此 方法 不 支持 IES 可 以 使 用 下 面 的 方法 解决 兼容 问题 。 


«div class="g-hd"></div> 
«div class="g-sd"></div> 
«div class="g-mn"></div> 
«div class="g-ft"></div> 
<style> 
html, 
body { 
width: 100%; 
height: 100%; 
overflow: hidden; 
margin: 0; 


html { 
_height: auto; 
_padding: 100px 0 50px; 


.g-hd, 

.g-sd, 

.g-mn, 

.g-ft { 
position: absolute; 
left: 0; 


.g- hd, 
.g-ft { 
width: 10096; 


.g-sd, 

.g-mn { 
top: 100px; 
bottom: 50px; 
_height: 100%; 


overflow: auto; 


.g-hd { 
top: 07 
height: 100px; 


.g-sd { 
width: 300px; 


.g-mn { 
_position: relative; 
left: 300px; 


pignit- mor 
atop: o; 
cert: O; 
_margin-left: 300px; 
} 
.g-ft { 
bottom: 0; 
height: 50px; 
} 
</style> 
Flex 


<div class="parent"> 
<div class="top"></div> 
<div class="middle"> 
«div class="left"></div> 
<div class="right"> 
«div class="inner"></div> 
</div> 
</div> 
<div class="bottom"></div> 
</div> 


«style media-'screen'"» 
html, 
body, 
parent { 
height: 100%; 
overflow: hidden; 


.parent { 
display: flex; 
flex-direction: column; 


.top { 
height: 100px; 


.bottom { 
height: 50px; 


.middle ( 
// 居中 自 适 应 
flex: 1; 
display: flex; 
/*flex-direction: row 为 默认 值 */ 


.left { 
width: 200px; 
} 
.right { 
flex: 1; 
overflow: auto; 
} 


.right .inner { 
min-height: 1000px; 
} 
</style> 


布局 解决 方案 


Flex 兼容 性 


CSS3 中 的 新 概念 所 有 1E9 及 其 也 行 版 本 都 不 兼容 。 


百分比 宽度 需求 






目 适 应 
一 + 

局 
自 

定 宽 (20%) i 
应 
定 
一 (5% 
高 ) 


只 需 把 定 宽 高 ( px 为 单位 的 值 ) 的 实现 改 成 百分比 (A) AT ° 


布局 解决 方案 


EH 


le ^ 4) 


vi 
E 
自 适 应 (内 容 ) | 适 
应 





只 有 右 侧 栏 占据 剩余 位 置 ， 其 余 空 间 均 需 根据 内 容 改变 。 所 以 Postion 的 定位 方法 
不 适合 实现 此 方案 。 下 面 列 出 了 两 种 布局 方案 : 


e Flex 
e Grid > W3C 草案 并 不 稳定 ， 浏 览 器 支持 也 并 不 理想 


Flex 


只 有 不 为 宽 高 做 出 限制 ， 既 可 对 其 中 的 内 容 做 出 自 适应 的 布局 。 
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«div class="parent"> 
«div class="top"></div> 
«div class="middle"> 
«div class="left"></div> 
«div class="right"> 
«div class="inner"></div> 
«/div» 
«/div» 
«div class="bottom"></div> 
«/div» 


«style media="Screen"> 
html, 
body, 
parent { 
height: 100%; 
overflow: hidden; 


.parent { 
display: flex; 
flex-direction: column; 


.niddle { 
// 居中 自 适 应 
flex: 4; 
display: flex; 
/*flex-direction: row 为 默认 值 */ 


.right ( 
flex: 1; 
overflow: auto; 

} 

.right .inner ( 
min-height: 1000px; 

J 

</style> 


方案 比较 


方案 
Position 
Flex 


Grid 


响应 式 布局 


多 屏 的 环境 让 我 们 不 得 不 考虑 网 络 内 容 在 各 个 尺寸 中 的 表现 ， 均 可 正常 访问 和 极 佳 
的 用 户 体验 。 


响应 式 布局 可 以 更 具 屏 幕 尺子 的 大 小 对 内 容 和 布局 做 出 适当 的 调 成 ， 从 而 提供 更 好 
的 用 户 感 受 。 也 是 因为 响应 式 布局 的 出 现 ， 开 发 者 也 无 需 对 不 同 尺 寸 设 备 而 特殊 定 
制 不 同 的 页 面 ， 这 大 大 降低 了 开发 成 本 和 缩短 了 开发 时 间 。 


这 样 的 方法 也 同样 存在 着 缺点 。 缺点 是 同样 的 资源 被 加 载 ， 但 因为 展示 平台 所 限 并 


不 能 全 部 显示 。 






View Port 
| ae | 
| | 
BEND c o 4 1 
I 
i =? ! 
i LI 
i I 
I -— I 
i x3 L 
Lm 
i I 
viewport ------- Ho = 
p MEL 980px i 
1 -— : 
i = 
1 = 
i Em 
| - 
LI X ! 
Uo ——————— : 
| CC 
Me 


<meta name="viewport" content="width=device-width, initial-scale 
=1.0, user-scalable=no"> 


针对 不 同 尺 寸 的 屏幕 进行 开发 ， 因 少 使 用 定 宽 而 使 用 自 适应 单位 。 


a 


向 应 式 布局 






T--------------- 





需求 会 更 具 具 体 设备 而 产生 变化 。 (例如 布局 方式 发 生 了 变化 ) 


@media screen and (max-width: 320px) { 
/* 视窗 宽度 小 于 等 于 320px */ 

} 

Qmedia screen and (min-width: 320px) { 
/* 视窗 宽度 大 于 等 于 320px */ 

} 

Qmedia screen and (min-width: 320px) and (max-width: 1000px){ 
/* 视窗 宽度 大 于 等 于 320px 且 小 于 等 于 1000px */ 





396 


页 面 优 化 


页 面 优化 可 以 提升 页 面 的 访问 速度 从 而 提高 用 户 体 验 ， 优 化 的 页 面 可 以 更 好 的 提升 
SEO 的 效果 同时 也 可 以 提高 代码 的 可 读 性 和 维护 性 。 


从 下 面 的 几 个 方面 可 以 进行 页 面 的 优化 : 


e. 减少 请 求 数 
o CSS 文件 合并 
o 减少 内 联 样式 
o 避免 在 CSS 中 使 用 import 
e 减少 文件 大 小 
o 选择 适合 的 图 片 格式 
o 图 片 压缩 
o CSS 值 缩 写 (Shorthand Property) 
o 文件 压缩 
e 页 面 性 能 
o 调整 文件 加 载 顺序 
o 减少 标签 数量 
o 调整 选择 器 长 度 
o 尽量 使 用 CSS 制作 显示 表现 
增强 代码 可 读 性 与 可 维护 性 
o 规范 化 
o 语义 化 
o 模块 化 


减少 请 求 

请 求 数 与 网 页 加 载 时 长 有 直接 的 关系 。 所 以 对 于 图 标 可 以 使 用 Sprite 来 减少 小 图 标 
的 请 求 数 ， 对 于 文本 则 可 以 通过 合并 缩小 。 (避免 使 用 import 引入 CSS 文件 ， 并 
且 请 求 是 同步 请 求 ) 

减少 文件 大 小 

页 面 上 最 大 的 流量 产生 与 多 媒体 (视频 或 图 片 ) 所 以 为 了 减少 文件 大 小 ， 开 发 者 需 
要 使 用 合适 的 媒体 格式 并 对 文件 进行 压缩 。 


页 面 性 能 


页 面 文件 的 加 载 顺序 自 上 而 下 ， 样 式 则 需要 放置 于 最 顶部 ， 脚 本 则 放置 于 底部 (A 
为 JavaScript 的 加 载 会 阻塞 页 面 的 绘制 ) 。 


减少 标签 的 数量 也 可 以 起 到 提升 性 能 的 作用 ， eA 选择 器 的 层级 来 提高 性 
能 。 减 少 使 用 消耗 性 能 的 样 E 


e expression .class{width: expression(this.width > 
100?'100px': 'auto')} 

e filter .class{filter:alpha(opacity=50)} 

e border-radius 

e box-shadow 

e gradients 


页 面 中 所 使 用 的 图 片 尺子 应 该 与 现实 尺寸 相符 否则 在 图 标 下 载 后 需要 重 绘 导致 性 能 
下 降 。 


能 使 用 样式 (使 用 CSS 的 类 名 ) 实现 的 交互 就 不 使 用 脚本 (需要 重 绘 导致 多 次 页 
面 泻 染 ) 来 实现 。 


可 读 性 与 可 维护 性 


开发 之 前 需要 明确 规范 ， 尤 其 是 对 人 协作 时 。 使 用 HTML5 语义 化 的 标签 来 制作 页 
面 ， 同 样 也 适用 于 样式 选择 器 的 ID 与 类 名 。 在 使 用 开发 中 的 奇 技 淫 巧 的 适合 需要 
深思 是 否 需 要 使 用 。 模 块 化 的 制作 页 面 和 样式 ， 提 高 可 复 用 性 并 减少 文件 大 小 。 


注释 注释 注释 ， 在 代码 中 添加 注释 ， 利 人 利 已 。 


页 面 模块 化 


规范 


在 具体 谈论 规范 的 之 前 ， 可 以 下 去 查看 下 各 大 网 络 公司 的 前 端 开发 规范 
( Developemnt Style Guide) 例如 谷歌 ，Facebook 或 者 Dropbox。 从 而 更 好 的 理 
解 开发 规范 在 实际 应 用 中 和 多 人 协作 中 的 重要 性 。 


不 同 开发 者 在 开发 过 程 中 使 用 不 同 的 代码 风格 会 直接 的 提升 在 之 后 的 开发 和 维护 的 
成 本 和 难度 ， 对 前 端 开 发 来 说 更 是 尤为 突出 。 这 时 使 用 代码 规范 来 约束 开发 者 的 编 
码 风格 就 可 以 大 体 解 决 这 些 问 题 。 规 范 的 制订 应 从 下 面 的 几 个 方面 来 开始 考虑 : 


e 文件 规范 
e. 注释 规范 
e 命名 规范 
e 书写 规范 
e 其 他 规范 


文件 规范 
文件 规范 又 可 以 从 三 个 方面 入 手 ， 分 类 ， 引 入 ， 以 及 文本 本 身 的 内 容 。 


e 分 类 (分 类 可 分 为 通用 类 和 业务 类 。 通 用 类 有 第 三 方 的 库 ， 团 队 开 发 的 通用 模 
块 或 者 通用 样式 。 业 务 类 则 有 不 同业 务 所 对 应 的 特定 模块 。) 


e 引入 


o CSS (引入 文件 则 需 尽 少 的 使 用 行内 样式 ) 
o JavaScript (文件 名 的 约束 ， 以 及 编码 设置 通常 使 用 utf-9 ) 


注释 规范 

注释 可 使 用 块 状 ， 单 行 注释 和 行内 注释 ， 需 要 统一 缩 进 等 细节 要 求 。 
命名 规范 

例如 CSS 选择 器 的 命名 规范 


e 分 类 命名 (例如 g-header 来 给 布局 类 的 样式 设置 命名 空间 来 防止 样式 污 
染 ，m-header 来 制定 模块 类 的 样式 ) 


e 命名 格式 (大 小 写 的 规定 ， 建 议 使 用 小 写 并 使 用 - 分 隔 ， 也 许 控制 选择 器 
的 长 度 避 免 过 长 的 样式 选择 器 名 称 但 不 可 失去 选择 器 语义 ) 
e 语义 化 命名 (以 内 容 的 语义 来 给 选择 器 命名 ) 


书写 规范 
这 里 使 用 CSS 的 书写 规范 来 做 示例 ， 可 以 参考 下 面 的 约束 : 


e 单行 与 多 行 (单行 与 多 行 的 CSS 书写 格式 ， 使 用 多 行 ! ) 
e 空格 与 分 号 (使 用 空格 进行 缩 进 并 保留 最 后 一 个 属性 的 分 号 ) 
e 书写 顺序 (更 具 显 示 的 重要 性 来 安排 可 参照 下 表 ) 

e Hack 方式 (三 思 而 后 行 ) 

e 值 格式 〈 例 如 颜色 值 的 格式 以 及 引用 中 是 否 使 用 引号 ) 


`> 显示 属性 自身 属性 文本 属性 和 其 他 修饰 





display Width font 

visibility height text-align 

position margin text-decoration 

float padding vertical-align 

clear border white-space 

list-style overflow color 

top min-width background 
其 他 规范 


里 包括 有 HTML 以 及 图 片 的 规范 : 


e HTML 
o 文档 声明 
o 闭合 
o 属性 
o 层级 
o 注释 
o 大 小 写 
e HÀ 
o 文件 名 称 (语言 以 及 长 度 的 规范 ) 
o 保留 源 文 件 


规范 与 模块 化 


模块 化 


模块 化 是 一 系列 相关 的 结果 组 成 的 整体 ， 这 部 分 具备 独立 存在 的 意义 不 单纯 只 是 表 


SN, o 


e 为 模块 分 类 命名 ( m-module-name ) 
e 以 一 个 主 选择 器 作为 开头 (模块 跟 节 点 ) 
e 使 用 以 主 选择 器 开头 的 后 代 选 择 器 (模块 子 节 点 ) 


在 开发 模块 化 是 需要 注意 的 一 些 步 骤 (以 CSS 模块 化 为 例 ) 
名 


NAV MODULE > index link1 link2 
«div ="m-nav"> 
<ul r9 
" " " AU. d , , .m-navi "Aa 
<li ="Z-crt"><a ="#" >index</a></li> FF 
"an "a .m-nav .m-nav aq 
<li><a z"s"»link1«/a»«/1i». - a (} 
fa^ .m-nav li() 
</ul> OMS 
, .m-nav af 
div nav a{} 
.m-nav .z-crt a{}/* 


NAV MODULE 


«!- NAV-1 MODULE --> ‘index linki 


«div class="m-nav m-nav-1"» 


link2 | Login | 


«ul» /* 导航 模块 扩展 */ 

«li classs"z-crt"»«a href="#">index</a></li> .m-nav-1() 

<li><a hrefz"s"»link1«/a»«/1li».. .m-nav-1 a(border-radius:5px;) 
«/ul» .m-nav-1 .btn{} 


<a class="btn">Login</a> 
</div> 
<!-- /NAV-1 MODULE --> 


«div class="m-slides”> 
<ol> 
«li class="slide z-crt"><img src="#"></li> 
«li class="slide"><img src="#"></li> 
«li classz"slide"»«img src="#"></1li> 
«li classs"slide"»«img src="#"></li> 


«/ol» 

«span classz"ctrl"»«i classz"z-crt"»«/i»«i»«/i»«i»«/i»«i»«/i»«/span» 
«/div» 
/* 未 模块 化 样式 */ /* ”模块 化 样式 */ 
.slides() .m-slides() 
.slide() .m-slides .slide() 
.slide img{} — .m-slides .slide img() 
li.z-crt() .m-slides li.z-crt{} 
.ctrl() .m-slides .ctrl() 
.ctrl i() .m-slides .ctrl i() 
i.z-crt() .m-slides .ctrl i.z-crt() 


模块 化 可 以 利于 多 人 开发 ， 便 于 扩展 ， 当 然 也 可 以 提高 代码 的 可 读 性 与 可 维护 性 。 
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规范 与 模块 化 
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专注 于 引导 前 端 工程 师 去 主导 团队 高 效 协作 ， 去 引领 团队 规范 化 、 工 程 化 构建 复杂 
系统 的 实践 过 程 。 

本 章节 的 核心 内 容 包 括 多 角色 低 耦 合 的 协作 流程 、 协 作 规范 、 多 角度 分 析 选 择 适 合 
具体 项 目的 技术 解决 方案 、 工 程 化 的 版 本 管理 、 系 统 构建 案例 分 析 。 


协作 流程 


协作 流程 


Web 系统 


B= 


Browser 






Browser 


Browser 


Web 系统 部 署 在 服务 器 上 为 提出 不 同 需求 的 外 部 客户 端 服务 。 


MVC (Model, View, Controller) 它们 分 别 代表 数据 层 ， 视 图 层 ， 和 控制 层 。 


控制 层 


ontroller 





e 数据 层 ， 封 装 数据 管理 操作 (例如 数据 的 CRUD ) 
e 视图 层 ， 展 示 数 据 模 型 提供 人 机 交互 
e 控制 层 ， 处 理 用 户 请 求 ， 委 托 数 据 层 ， 选 择 视图 层 进 行 展 示 
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协作 流程 


NOTE : CRUD 代表 Create ` Read ` Update ` Delete ° 


下 面 以 用 户 请 求 页 面 为 例 : 


— 控制 | 层 
— ontroller 





.客户 端 发 送 请 求 ， 服 务 器 控制 层 接受 到 请 求 
. 请 求 数 据 层 获取 数据 ， 返 回 控制 层 

.控制 层 根据 数据 选择 合适 的 视图 层 进 行 展示 
. 视图 层 生 成 页 面 代 码 ， 返 回 控制 层 
.控制 层 返回 客户 端 进行 展示 


O A O N > 


ARRE K 


PHOTOSHOP 


JAVASCRIPT 









TEMPLATE 


JAVA/PHP/Node … 
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协作 流程 


Photoshop > KAA te 

e CSS 5 HTML > #74 R d 

e JavaScript Ay 35 X 7.37 44 

e Template 结构 与 内 容 分 离 整 合 
e Java/PHP/Node /&6 35 3£ 44 


s 


e 后 期 维护 性 差 (相同 内 容 ， 不 同形 成 存在 ) 
e 专业 化 程度 低 
e 需求 响应 速度 慢 


前 端 工程 师 新 责任 


PHOTOSHOP 






TEMPLATE 


J AVA/PHP/Node … 


随 着 视图 层 也 会 存在 业务 逻辑 的 需求 ， 前 端 工程 师 也 会 参与 到 业务 逻辑 的 实现 中 
去 。 这 样 使 前 端 工 程 师 可 以 在 后 期 转换 成 全 栈 工程 师 (Fullstack Developer) ° 


JAVASCRIPT 





角色 定义 


完成 一 个 Web 系统 需要 至 少 以 下 三 种 角色 : 
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视觉 工程 师 ， 视 觉 稿 到 交互 原型 的 转化 
e 前 端 工 程 师 ， 实 现 系统 前 端 交互 逻辑 
端 工 





e 后 程 师 ， 系 统 后 端 业务 逻辑 
前 端 工 程 师 
PHOTOSHOP MEN rT 
css M Him. L zum 
T ip 
JAVASCRIPT MMC MEE -oTo sor 
TEMPLATE B pS 
JAVA/NODE--. B AERE ow. 
p ll JAVAscRIPT 
iz] p à EATE 
页 面 工 程 师 


AZZ ;vAmoce-- 


前 端 部 分 又 可 再 细 分 为 页 面 工 程 师 和 前 端 工 程 师 **。 前 者 更 注重 和 视觉 工程 师 的 协 
作 ， 后 者 则 更 多 的 与 后 端 工 程 师 进行 协作 。 


e 精 
e T 


e X 


通 切 图 技术 (Photoshop * Sketch) 

通 页 面 制 作 (CSS > HTML) 

悉 前 端 开 发 技术 (JavaScript，Template) 
e 了 解 后 端 开发 技术 (Java’ Node) 


前 端 工程 师 


页 面 制作 (CSS*HTML) 

前 端 开 发 技术 (JavaScript * Template ) 
e 诸 悉 切 图 技术 (Photoshop * Sketch) 

e 熟悉 后 端 开发 技术 (Java，Node ) 


项 目 工 时 分 配 比 


协作 流程 





NOTE : 多 角色 开发 会 比 单 人 工程 增加 工作 沟通 成 本 。 
协作 流程 


开发 过 程 





-ê -JEDU 4. 
前 端 工 程 师 
-&—um— "3 


Â rures 


wS f he SH IO Xt 


按照 流程 规范 可 以 明确 角色 和 其 对 应 的 职责 ， 这 样 可 以 大 大 减少 角色 间 的 沟通 成 
本 。 


b 


e 页 面 入 口 规范 ， 定 义 系 统 对 外 可 访问 入 口 和 配置 信息 
e 同步 数据 规范 ， 定 义 系统 对 模板 文件 的 预 十 信息 
e 异步 接口 规范 ， 定 义 前 后 端 接口 信息 


维护 过 程 





NOTE : 红色 路 径 为 不 需要 改变 规范 的 前 提 下 ， 响 应 需求 变更 。 


下 面 将 总 结 各 个 角色 职责 具体 任务 : 


页 面 工 程 师 
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e 切 图 、 图 片 优化 

e 页 面 制作 、 优 化 页 面 效果 与 结构 (适合 业务 逻辑 开发 ) 
e 完成 简单 的 前 端 业务 逻辑 开发 

前 端 工程 师 

e 主导 制定 前 后 端 分 离 规范 

e 主导 前 端 联 调 对 接 测试 

e 系统 前 端 设计 架构 、 满 足 一 定 的 非 功 能 性 需求 

e 完成 系统 前 端的 业务 逻辑 实现 、 优 化 实现 好 辑 
后 端 工 程 师 

e 协助 定制 前 后 端 分 离 规范 

e 协作 前 后 端 联 调 对 接 测 试 

e 完成 后 端 系统 框架 及 业务 逻辑 实现 

角色 与 人 之 间 不 一 定 需 要 一 一 对 应 ， 前 端 工程 师 和 页 面 工 程 师 可 能 是 一 人 。 SRL 
程 师 则 有 能 力 包揽 一 切 。 


接口 设计 





用 户 使 用 Web 客户 端 访问 Web 系统 ， 系 统 在 收 到 请 求 后 执行 操作 (收集 数据 模 
型 ， 选 择 数 据 经 行 组 装 ) ， 将 结果 返回 给 客户 。 


其 中 包括 的 元 素 和 关系 如 下 图 所 示 : 


TEMPLATE 


API 





e Template， 分 离 数 据 模型 的 页 面 结构 ， 根 据 不 同 的 数据 模型 展现 不 同 的 信息 
e URL， 页 面 访问 地 址 、 页 面 标 示 
e API， 用 于 载 入 异步 请 求 的 接口 
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接口 设计 


e Model， 数 据 模 型 ， 页 面 模板 组 装 模 型 和 异步 请 求 返 回 的 数据 模型 





1. URL 与 页 面 模 板 间 的 映射 ， 和 异步 裁 入 内 容 对 应 的 接口 
2. 视图 模板 和 数据 模型 的 对 应 (数据 模型 的 格式 和 类 型 ) 
3. 异步 接口 输入 输出 信息 的 约定 


页 面 入 口 同步 数据 Soc 


TEMPLATE 





TEMPLATE 





1. 页 面 入 口 规范 ， 定 义 系统 对 外 可 访问 入 口 和 配置 信息 (URL > BR HT) 
2. 同步 数据 规范 ， 定 义 系 统 对 模板 文件 的 预 填 信 息 (模板 、 数 据 模型 ) 
3. 异步 接口 规范 ， 定 义 前 后 端 接口 信息 (接口 、 数 据 模 型 ) 


接口 规范 
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每 个 规范 也 会 对 应 若干 规定 若干 规则 约定 来 指导 前 后 端 工程 师 的 具体 实施 。 


TEMPLATE 





e 基本 信息 
e 模板 列表 
e 接口 列表 (异步 载 入 数据 接口 ) 


页 面 入 口 规范 (范例 ) 


条 目 详情 
访问 地 址 /dj/{id} 
页 面 描述 节目 详情 及 推荐 信息 
输入 参数 名 称 : ID ; 类 型 : Number ; 描述 : 节目 标示 
异常 跳 转 异常 : 500 ; 跳 转 地 址 : /500/ 
模板 列表 Rik: /template/dj/dj.ftl 


过 期 : /template/dj/over.ftl 

未 找到 : /template/dj/404.ftl 
接口 列表 歌曲 列表 : /api/dj/tracks/(id)/ 

相关 节目 : /api/dj/rec/(id)/ 

收藏 节目 : /api/dj/fav/(id)/ 

评论 节目 : /api/comments/{id} 
e 页 面 基本 信息 ， 描 述 页 面 的 主要 功能 


e 输入 参数 为 访问 地 址 时 支持 的 参数 说 明 
e 异常 跳 转 ， 为 系统 全 局 异常 处 理 
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e 模板 列表 ， 列 举 当 前 页 面 的 相关 模板 ， 包 括 异 常 《 如 下 图 ) 
e 页 面 需要 的 所 有 异步 接口 列表 


ESI) 
| O ce Sites. etmenane O EL 


| U 女装 ,掌上 泡 泡 ,专柜 同步 新 品 特卖 O 


| 国生 — 
t pi "n R 





同步 数据 规范 





e 基本 信息 
e 预 填 数据 
e 注入 接口 


同步 数据 规范 ( 范例 ) 
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&H 
模板 文 
件 
模板 描 
SOR 


AX 


注入 接 


/templates/dj/dj.ftl 


节目 详情 及 推荐 信息 模板 文件 


人 


(nose 
(Ioa 


jd.parser 


L'A" : 


化 "]]} 


{" 输 出 " 


dj.api 
dj.api2 


。 模 板 的 基本 信息 
。 VOR AGE 6,464: Efe TC UE CREAR 
。 注 入 的 接口 说 明 (输入 输出 信息 ) ， 没 有 可 以 不 填写 


异步 接口 数据 规范 





e 基本 信 
e 输入 信 


异步 接口 规范 〈 范 例 ) 


"user", "XÆ": "User", "di": "SEA P 48 A") 


"gj i nd Ad" : "Program", "dy c" : Way H 信息 "} 


"other", "Æ": "string", "描述 ":" 其 他 信息 "} 


[["String"，" 节 目 信 息 "]，["Boolean"，" 是 否 格 式 


["Program", Way H x EU] 


& H 详情 

请 求 方式 GET POST 

接口 地 址 api/dj/tracks/{id}/ 

接口 描述 ”获取 指定 节目 的 歌曲 列表 

输入 数据 ("SAR id", RA "Number", "描述 ":" 节 目标 示 "} 
{" 名 称 ":"offset"， "类型":"Number", "描述 ":" 节 目 起 始 位 置 "} 
和 

输出 结果 (UERUIU code", "AES": Number", "描述 ": "请 求 结果 标示 "] 
("A 4r" :"message", "类 型 ";"String", "Bw" "RH Ede AS) 
{"Z 4": "result", "类型":"Array", "描述 ":" 歌 曲 列表 "} 


e 接口 基本 信息 ， 地 址 不 带 查询 参 

e 输入 数据 ， ig ， 查 询 数 据 e VA 称 类 型 及 描述 ) 
e 输出 结果 ， 部 分 及 结果 集 (复杂 的 信息 需 展 开 说 明 ) 
见 池 的 应 用 


or Cd M E 将 前 端 本 地 开发 与 后 端 独立 出 来 ， 这 样 前 端 工程 师 就 可 以 独 
立 的 进行 本 地 的 开发 工作 。 


«G compress» 
DOCTYPE htm 





pale. fine js?${jscnf}" ></script> 
joeni ja remite srt 











| ( | templates common 
e "/dj/Gidy/":[ 
Mi " /templates/dj/dj ftl", E D 
penn | me jame "/templates/dj/404.ftl", J dj.ftl 
| '/templates/dj/over.ftI", | JEEE - 
= B 2i» t 
- z ... 
= - 404 ftl 
eui 
Li 
over.ftl 


使 用 页 面 入 口 规范 制定 项 目 结构 (配置 信息 ， 目 录 结 构 和 模板 结构 ) ， 此 过 程 可 以 
使 用 自动 化 工具 自动 完成 。 


接口 设计 





djftl 


templates j 404.ftl 






over ftl 





ay 


根据 同步 数据 规范 可 生成 模拟 数据 的 配置 文件 。 (此 部 分 通用 可 以 使 用 自动 化 工具 
来 完成 ) 





over.ftl 





根据 异步 接口 规范 生成 模拟 异步 数据 。 


本 地 开发 
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接口 设计 





LY 
m 
wuPs/ E 


RemoteServer 








前 端 开 发 环境 包含 两 个 部 分 ， 本 地 模拟 服务 器 和 本 地 代理 。 


1. 客户 端 发 送 的 请 求 ， 会 被 本 地 模拟 服务 器 拦截 并 返回 相应 的 模拟 数据 
2. 客户 端 发 送 的 异步 请 求 ， 会 被 本 地 代理 拦截 并 返回 对 应 的 模拟 数据 


Local Server 


«G compress» 
<IDOCTYPE html» 
<html> 
<head> 
<#include "/common/macro.ftl"/> 


<title> 页 面 标题 </title> 
«meta charset="utf-8"/> 





over.ftl 


根据 请 求 规则 进行 匹配 ， 然 后 生成 (整合 模板 和 模拟 数据 ) 所 请 求 的 页 面 


Local Proxy 
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javascript mock 21234.js 


/api/dj/tracks/54678/ 
l—Y 9€ 
21235.js 


‘eine’ 
= Json Data 


V ae t 


LocalProxy 


21236.js 





拦截 异步 请 求 后 ， 根 据 请 求 的 匹配 规则 返回 所 请 求 的 数据 (例如 JSON X 


XML) 


联 调 


o 


ühtp//mencltlcem/dySM478 pe em MENS 


D 
e, 
Sy 
q—MÓ————ÀMr 








联 调 需 要 去 除 本 地 环境 ， 在 实际 开发 中 只 需要 对 配置 文件 进行 调整 既 可 
请 求 需要 被 本 地 服务 器 或 代理 拦截 ， 哪 些 需要 使 用 远程 服务 器 ) 。 





( 控 
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版 本 控制 
版 本 管理 涉及 团队 协作 ， 产 品质 量 ， 和 产品 上 线 。 使 用 版 本 控制 工具 可 使 我 们 自由 
的 做 的 一 些 几 点 : 


e 回 退 到 任意 版 本 
e 查看 历史 版 本 
e 对 比 两 个 版 本 差异 


版 本 控制 系统 


版 本 控制 系统 (Version Control System) 是 一 种 记录 若干 文件 修订 记录 的 系统 ， 
它 可 以 帮助 开发 者 查阅 或 回 档 至 某 个 历史 版 本 。 


e 手动 版 本 控制 

e LVCS 本 地 

e CVCS 集中 式 〈 例 如 SVN) 
e DVCS 分 布 式 (例如 Git) 


手动 版 本 控制 


无 法 有 效 找到 需要 版 本 和 差异 ， 污 染 工作 目录 结构 。 


Local VCS 本 地 式 


版 本 控制 





于 是 出 现 了 本 地 版 本 控制 系统 RCS (Reversion Control System) ， 其 利用 本 地 版 
本 数据 库存 储 不 断 出 现 的 文件 版 本 。 它 可 以 迅速 找 出 需求 的 版 本 和 维持 工作 目录 结 
构 。 其 缺点 是 不 支持 协同 开发 ， 这 也 让 开发 者 不 将 其 选 做 通用 的 版 本 控制 工具 来 使 
用 o 


CVCS 集中 式 





版 本 控制 


利用 中 央 服 务 器 来 管理 文件 版 本 ， 但 每 一 次 操作 都 需要 网 络 请 求 ， 且 具有 致命 的 单 
点 故障 。 ( 既 中 央 服 务 器 故障 可 导致 ， 无 法 协同 工作 或 数据 丢失 ) 


DVCS 分 布 式 





分 布 式 指 的 是 每 一 份 本 地 仓库 都 是 一 个 完整 的 项 目 历史 拷贝 ， 即 使 一 份 仓 库 丢 失 或 
者 损坏 也 可 以 从 其 他 的 仓库 中 获取 此 项 目的 完整 历史 记录 。 也 因为 在 添加 新 版 本 不 
需要 网 络 ， 这 可 以 使 操作 流程 。 


分 支 模型 


如 果 多 人 并 行 在 一 条 线 上 开发 会 导致 开发 困难 并 且 难 以 定位 错误 位 置 。 
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N 
OOO O_O 
0-0 
0-0-0-0 


分 支 ， 就 是 从 目标 仓库 获得 一 份 项 目 拷贝 ， 每 条 分 支 都 具有 和 原 仓库 功能 一 样 的 开 


TXIA! (Branching Model) 或 称 之 为 工作 流 (Workflow) ， 它 是 一 个 围绕 项 目 
开发 、 部 署 、 测 试 等 工作 流 的 分 支 操作 (创建 及 合并 等 ) 的 规范 集合 。 


产品 级 开发 分 支 模型 


e development， 从 master 创建 
e production (master) ， 默 认 分 支 可 用 于 发 布 的 代码 


活动 分 支 


e feature， 从 development， 创 建 其 为 特性 分 支 
e hotfix， 从 master 创建 ， 用 于 修复 Bug 
e release， 从 development 创建 
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版 本 控制 





D ag <> 
master —> o~- o 
hotfix 一 QO 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 k 


release 一 一 一 一 一 一 一 -0—0^0— 一 一 一 一 局 


/ NN Y 
development — — — 0-0 


4 





环境 





e 开发 环境 ， 使 用 测试 开发 配置 ( 数据库， 缓存 ， 元 数据 配置 ) 
o 使 用 提交 到 下 一 个 release 的 特性 分 支 
e 测试 环境 ， 使 用 测试 配置 (测试 数据 库 ) 
o 使 用 release/development 
e WAR? LCA RMA LAE ERMA KARI 
o 使 用 release 
e 生产 环境 ， 线 上 配置 
o 使 用 master 


Git 
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Git 是 一 个 免费 开源 的 分 布 式 版 本 控制 系统 ， 它 也 一 个 基于 内 容 寻 址 的 存储 系统 。 


Git 是 由 Linux 的 创造 者 Linus Torvalds ° 
优势 


e 速度 快 ， 不 依赖 网 络 
o 
e 级 分 支 操作 
e vec ces 制 供给 
e. 活跃 和 成 熟 的 社区 
安装 
Mac OS X 下 使 用 brew install git 下 载 更 新 既 可 。 


Linux Ubuntu 下 可 使 用 apt-get install git E ° 


Git 介绍 
Git 命令 


常用 Git 命令 ， 当 在 命令 行 中 键入 git 可 以 便 可 以 在 帮助 信息 中 看 到 。 





1. X@Z9hbffLvnCyq8YQBnGnkgnwFLKUkUs: ~ (zsh) 





X@Z9hbf FLvnCyq8YQBnGnkgnwFLKUkUs git 
usage: git [--version] [--help] [-C <path>] [-c name=value] 


[--exec-path[=<path>]] [--html-path] [--man-path] [--info-path] 
[-p | --paginate | --no-pager] [--no-replace-objects] [--bare] 
[--git-dir=<path>] [--work-tree=<path>] [--namespace=<name>] 


<command> [<args>] 


The most commonly used git commands are: 


add 
bisect 
branch 
checkout 
clone 
commit 
diff 
fetch 
grep 
init 
log 
merge 


mv 
pull 
push 
rebase 
reset 
rm 
show 
status 
tag 


Add file contents to the index 

Find by binary search the change that introduced a bug 
List, create, or delete branches 

Checkout a branch or paths to the working tree 

Clone a repository into a new directory 

Record changes to the repository 

Show changes between commits, commit and working tree, etc 
Download objects and refs from another repository 

Print lines matching a pattern 

Create an empty Git repository or reinitialize an existing one 
Show commit logs 

Join two or more development histories together 

Move or rename a file, a directory, or a symlink 

Fetch from and integrate with another repository or a local branch 
Update remote refs along with associated objects 
Forward-port local commits to the updated upstream head 
Reset current HEAD to the specified state 

Remove files from the working tree and from the index 

Show various types of objects 

Show the working tree status 

Create, list, delete or verify a tag object signed with GPG 


‘git help -a' and ‘git help -g' list available subcommands and some 
concept guides. See ‘git help <command>' or ‘git help <concept>' 

to read about a specific subcommand or concept. 

X X@Z9hbFFLYnCyq8YQBnGnkgnwFLKUkUs | 


获取 帮助 





git help «command» git «command» -h git «command» --help 还 有 


man git-«command» 均 可 查询 某 个 命令 的 帮助 文档 。 


基本 操作 


配置 Git 使 用 git config 此 为 创建 Git 仓库 前 必须 完成 的 配置 。 


git config --global user.name "Li Xinyang" 


git config --global user.email "lixinyangi0260gmail.com" 


e -local 默认 具有 最 高 优先 级 只 影响 本 仓库 .git/config 
e --global 中 级 优先 级 影响 到 所 有 当前 用 户 的 仓库 -/.gitconfig 
e --System 最 低 优先 级 影响 到 全 系统 的 仓库 /etc/gitconfig 


初始 化 仓库 


e-e 1. X@Z9hbffLvnCyq8Y QBnGnkgnwFLKUkUs: ~/Git-In-Action (zsh) 
X@Z9hbf fFLvnCyq8YQBnGnkgnwFLKUkUs clear 

X@Z9hbf FLvnCyq8YQBnGnkgnwFLKUkUs git init 

Initialized empty Git repository in /Users/X/Git-In-Action/.git/ 

X@Z9hbf FLvnCyq8YQBnGnkgnwFLKUkUs tree .git 





t 

HEAD 

config 

description 

hooks 
appLypatch-msg.sample 
commit-msg.sample 
post-update. sample 
pre-appLypatch. sample 
pre-commit.sample 
pre-push.sample 
pre-rebase.sample 
prepare-commit-msg.sample 
update. sample 


L-— exclude 


L-- tags 


初始 化 仓库 ， 使 用 git status 可 以 查询 当前 仓库 的 状态 。 如 在 未 初始 化 仓库 时 
查询 状态 会 报 出 错误 信息 。 


git init [path] 
git init [path] --bare 


在 初始 化 仓库 后 会 出 现 一 个 隐藏 的 目录 .git 其 中 包括 了 所 有 的 当前 仓库 的 版 本 
信息 和 本 地 设置 文件 ( .git/config )。 





e^e 1. X@Z9hbffLvnCyq8Y QBnGnkgnwFLKUkUs: -/Git-In-Action (zsh) 


X@Z9hbf FLvnCyq8YQBnGnkgnwFLKUkUs git status 
On branch master 





Initial commit 


nothing to commit (create/copy files and use "git add" to track) 
X@Z9hbf fFLvnCyq8YQBnGnkgnwFLKUkUs 


查询 状态 
git status 此 命令 可 以 帮助 开发 者 在 下 面 三 对 关系 中 找 出 文件 状态 的 变化 。 


e 未 跟踪 <--> 跟踪 
e 工作 目录 <--> 暂 存 区 
e FRR <-> 最 新 提交 


内 容 状态 文件 状态 





j=. am CC 


“文件 跟踪 状态 





Git 中 存在 两 种 状态 内 容 状 态 和 文件 状态 。 仓库 中 的 文件 均 可 以 在 状态 和 区 域 之 间 
进行 转换 。 


e^e 1. XGZ9hbffLvnCyqBYQOBnGnkgnwFLKUKUs: ~/Git-In-Action (zsh) 


XgZ9hbffLvnCyq8YQBnGnkgnwFLKUkUs 9 touch README .md 
X@Z9hbffLvnCyq8YQBnGnkgnwFLKUkUs 2 <An ee git status 


On branch master 









Initial commit 


Untracked files: 
(use "git add <file>..." to include in what will be committed) 


nothing added to commit but untracked files present (use "git add" to track) 
X@Z9hbF FLvnCyq8YQBnGnkgnwFLKUkUs — 7/55 Sse 


添加 文件 到 暂 存 区 (同时 跟踪 文件 ) 


git add [file] 


eoe 1. X@Z9hbffLvnCyq8YQBnGnkgnwFLKUkUs: -/Git-In-Action (zsh) 


X@Z9hbf fLynCyq8YQBnGnkgnwFLKUKUs ——/65— 5 Ss git add README.md 
XQz9hbffLvnCyq8YQBnGnkgnwFLKUKUs 9 -An ee UL git status 


On branch master 





Initial commit 


Changes to be committed: 
(use "git rm --cached <file>..." to unstage) 


X@Z9hbf fFLvnCyq8YQBnGnkgnwFLKUkUs S39 中 站 


上 图 所 示 ， 我 们 将 README ,md 文件 从 工作 区 提交 至 暂 存 区 ， 并 将 文件 状态 从 未 
跟踪 改变 成 已 跟踪 。 


Q= — = =- á- á- o o o 


| 
NOTE : 批量 增加 当前 目录 下 全 部 文件 git add 


e^e 1. XGZ9hbffLvnCygqBYQBnGnkgnwFLKUKUs: -/Git-In-Action (zsh) 


X@Z9hbf FLvnCyq8YQBnGnkgnwFLKUkUs ; git status 
On branch master 





Initial commit 


Changes to be committed: 
(use "git rm --cached <file>..." to unstage) 


Untracked files: 
(use "git add <file>..." to include in what will be committed) 


X@Z9hbf FLvnCyq8YQBnGnkgnwFLKUkUs git add . 
X@Z9hbf FLvnCyq8YQBnGnkgnwFLKUkUs ) git status 
On branch master 


Initial commit 


Changes to be committed: 
(use "git rm --cached <file>..." to unstage) 


X@Z9hbf FLvnCyq8YQBnGnkgnwFLKUkUs 


忽略 文件 


.gitignore 可 以 在 添加 至 仓库 时 忽略 匹配 的 文件 ， 但 仅 作用 于 未 跟踪 的 文件 。 


版 本 控制 


一 i 

| git add | 
i | 
| | 
| | 
| ] 
| | 
i 





NOTE : GitHub 为 各 个 类 型 项 目 和 操作 系统 提供 了 忽略 文件 模板 ， 可 以 在 这 里 找 
到 o 

暂 存 区 删除 文件 

使 用 git rm 可 以 做 到 从 暂 存 区 删除 文件 ， 下 面 提 供 几 种 常用 的 使 用 方法 : 


e git rm --cached 仅 存 暂 存 区 删除 

e git rm 才 暂 存 区 和 工作 区 目录 中 删除 

e git rm $(git ls-files --deleted) 删除 所 有 被 跟踪 但 在 工作 区 已 经 被 
删除 的 文件 


NOTE: git-ls-files 
e Show information about files in the index and the working tree 
工作 区 与 暂 存 区 


不 同 的 区 域 中 可 以 存在 文件 的 独立 版 本 ， 如 下 图 所 示 工 作 区 和 暂 存 区 的 文件 为 两 个 
不 同 的 版 本 。 (之 前 上 个 例子 中 所 创建 的 DummyFile 文件 已 被 删除 ) 
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e^e 1. X@Z9hbffLvnCyq8YQBnGnkgnwFLKUkUs: ~/Git-In-Action (zsh) 
X@Z9hbf fFLvnCyq8YQBnGnkgnwFLKUkUs ; git status 
On branch master 





Initial commit 


Changes to be committed: 
(use "git rm --cached <file>..." to unstage) 


Changes not staged for commit: 
(use "git add <file>..." to update what will be committed) 
(use "git checkout -- <file>..." to discard changes in working directory) 


X@Z9hbf FLvnCyq8YQBnGnkgnwFLKUkUs 


MAE 


我 们 可 以 把 暂 存 区 上 比 作 一 个 每 类 物品 只 能 放置 一 次 的 购物 车 此 外 还 具有 下 面 的 特 
质 : 


o 货架 和 购物 车 可 同时 出 现 同 种 物品 

o 货架 上 的 物品 可 以 替换 掉 购 物 车 的 物品 
e 可 以 删除 物品 

e. 提交 购物 车 完成 购买 并 生成 购买 记录 


@ 物品 E 文件 
e 货架 : 工作 目录 
@ 购物 车 暂 存 区 


e 购买 : 提交 内 容 


提交 版 本 记录 


T T T 


| | gitcommit | 
I  -— — 
| | | 
| | | 
| | | 
| | | 


© o © 


git commit 可 以 根据 暂 存 区 的 内 容 创 建 一 个 提交 目录 。 


e^e 1. X@Z9hbffLvnCyq8Y QBnGnkgnwFLKUkUs: ~/Git-In-Action (zsh) 


X@Z9hbf fFLvnCyq8YQBnGnkgnwFLKUkUs > git status 
On branch master 





Initial commit 


Changes to be committed: 
(use "git rm --cached «file»..." to unstage) 


Changes not staged for commit: 
(use "git add <file>..." to update what will be committed) 
(use "git checkout -- <file>..." to discard changes in working directory) 





X@Z9hbf fFLvnCyq8YQBnGnkgnwFLKUkUs ; git commit -m ‘Initial commit' 


[master (root-commit) 7aaa5d4] Initial commit 
1 file changed, © insertions(+), © deletions(-) 
create mode 100644 README.md 
X@Z9hbf fFLvnCyq8YQBnGnkgnwFLKUkUs ? git status 
On branch master 
Changes not staged for commit: 
(use "git add <file>..." to update what will be committed) 
(use "git checkout -- <file>..." to discard changes in working directory) 


no changes added to commit (use "git add" and/or "git commit -a") 
X@Z9hbf FLvnCyq8YQBnGnkgnwFLKUkUs ) | 


NOTE: 直接 提交 工作 区 的 内 容 git commit -a -m 'message' 
这 样 操作 。 


查询 提交 历史 记录 


git log 可 以 用 来 显示 提交 是 记录 信息 。 





,工作 中 不 建议 


e^e 1. git log (git) 


Author: Li Xinyang <Lixinyang1026@gmail.com> 
Date: Fri Jul 3 11:18:23 2015 +0800 


Initial commit 


CEND) | 


其 中 包括 : 


一 kk 


e 提交 编号 SHA-1 编码 的 HASH 标示 符 
e git-config 配置 的 提交 者 信息 
e 提交 日 期 


e 提交 描述 信息 
工作 中 可 使 用 下 面 简单 的 配置 进行 版 本 查询 
git log --oneline 
H 较 长 的 命令 可 以 使 用 alias 的 方法 简化 
git log --color --graph --pretty=format: '%Cred%h%Creset 


ow)%d%Creset 96s %Cgreen(%cr) %C(bold blue)<%an>%Creset' 


-commit 


Git 中 alias 命令 设置 





-96C (yell 
- -abbrev 


配置 Git 中 别名 的 方法 git config alias.shortname «fullcommand» ° 


git config --global alias.lg "log --color --graph --pretty-forma 
t:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold b 
lue)<%an>%Creset' --abbrev-commit" 


git lg 


NOTE : 如 果 你 使 用 Mac OS X 可 以 尝试 使 用 Oh My Zsh 其 中 已 经 预先 设置 好 了 非 
常 多 常用 别名 。 


显示 版 本 差异 


e^e 1. git diff (git) 
diff --git a/README.md b/README.md 

index e69de29..8ab686e 100644 

--- a/README.md 

+++ b/README.md 


(END) | 





git diff 用 于 显示 版 本 差异 ， 下 面 是 几 个 常用 的 方法 : 


git diff 显示 工作 目录 与 暂 存 区 的 差异 

git diff -cached [«reference»] 暂 存 区 与 某 次 提交 的 差异 (默认 为 
HEAD) 

e git diff «reference» 工作 目录 和 某 次 提交 间 的 差异 


e git diff «reference» «reference» 查询 两 次 提交 直接 的 差别 


版 本 控制 









git diff da985 b325c 


git diff --cached 


git diff maint git diff HEAD 


撤销 工作 区 的 修改 
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版 本 控制 





git checkout -- file 


i 
| 
| 
i 
i 


é é 


git checkout -- «file»... 可 用 于 撤销 工作 区 的 修改 (此 方法 会 丢弃 工作 区 
修改 且 不 可 恢复 ) ， 下 面 是 一 些 常用 方法 : 


e git checkout -- «file» 将 文件 从 暂 存 区 复制 到 工作 目录 
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e^e 1. X@Z9hbffLvnCyq8YQBnGnkgnwFLKUkUs: -/Git-In-Action (zsh) 


X@Z9hbf FLvnCyq8YQBnGnkgnwFLKUkUs git status 
On branch master 
Changes not staged for commit: 

(use "git add <file>..." to update what will be committed) 

(use "git checkout -- <file>..." to discard changes in working directory) 





no changes added to commit (use "git add" and/or "git commit -a") 

X@Z9hbf FLvnCyq8YQBnGnkgnwFLKUkUs ) git checkout -- README.md 
X@Z9hbf FLvnCyq8YQBnGnkgnwFLKUkUs git status 

On branch master 

nothing to commit, working directory clean 

X@Z9hbf FLvnCyq8YQBnGnkgnwFLKUkUs 


NOTE :使 用 -- 是 为 了 避免 路 径 和 引用 (或 提交 ID) 同名 发 生 的 冲突 。 


撤销 暂 存 区 内 容 


版 本 控制 





it reset HEAD «file» 


| g 
! 
| 
| 
| 


ò ó 


使 用 git reset HEAD «file»... 可 用 于 撤销 暂 存 区 的 修改 ， 下 面 是 一 些 常 用 
操作 : 


e git reset HEAD «file» 将 文件 内 容 存 上 次 提交 复制 到 暂 存 区 。 
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e^o 1. X@Z9hbffLvnCyq8Y QBnGnkgnwFLKUkUs: ~/Git-In-Action (zsh) 
X@Z9hbf FLvnCyq8YQBnGnkgnwFLKUkUs D git status 
On branch master 
Changes to be committed: 

(use "git reset HEAD <file>..." to unstage) 





X@Z9hbf FLvnCyq8YQBnGnkgnwFLKUkUs ) git reset HEAD README.md 
Unstaged changes after reset: 
M README .md 
X@Z9hbf FLvnCyq8YQBnGnkgnwFLKUkUs > git status 
On branch master 
Changes not staged for commit: 
(use "git add <file>..." to update what will be committed) 
(use "git checkout -- <file>..." to discard changes in working directory) 


no changes added to commit (use "git add" and/or "git commit -a") 
X@Z9hbffLvnCyq8YQBnGnkgnwFLKUkUs 


撤销 全 部 修改 


版 本 控制 





b à 


git checkout HEAD -- «file» 可 以 直接 将 内 容 从 上 次 的 提交 复制 到 工作 区 。 
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XQZ9hbffLvnCyq8YQBnGnkgnwFLKUkUs ? git status 
On branch master 
Changes to be committed: 

(use "git reset HEAD <file>..." to unstage) 


X@Z9hbf fFLvnCyq8YQBnGnkgnwFLKUkUs > git checkout HEAD -- README.md 
X@Z9hbf FLvnCyq8YQBnGnkgnwFLKUkUs git status 

On branch master 

nothing to commit, working directory clean 

X@Z9hbf FLvnCyq8YQBnGnkgnwFLKUkUs 





交 区 已 跟踪 


T 
i 
| 
I 


H 
Alu 
m 
D: 
x 
ii 


git commit 
sh 


: ET 
git commit -9 


Cy 


T 
| 
| 
i 
| 
| 
l | 
I 
| 


git checkout -- file | git reset file 
d 全 一 一 一 一 一 一 一 一 一 


oa, © 
“4 w 
3 a 


| | 
| | 
| | | | 
| | 
文件 跟踪 状态 。 





分 支 操作 
git branch 


使 用 git branch 可 以 对 仓库 分 支 进行 增删 查 改 的 操作 ， 下 面 列 举 了 一 下 常用 的 
操作 方式 : 


版 本 控制 


e git branch «branchname» ， 创 建 指定 分 支 
e git branch -d «branchname» ， 删 除 指定 分 支 
e git branch -v ， 显 示 所 有 分 支 信 息 


一 份 分 支 的 引用 只 是 一 个 文本 文件 , 里 面 只 有 一 个 SHA 编码 E 它 保存 于 
.get/refs/heads/master 中 。 


一 一 郑 海 波 网 易 工 程 师 


git branch next 


14d08d1 c4006ex e39d0b2 





git commit -m 'message' 


14d08d1 cd4d006e e39d0b2 





切换 至 目标 分 支 


443 


版 本 控制 


git checkout 它 可 以 本 枝 上 根据 通过 移动 HEAD (指向 当前 的 提交 ) 检测 出 版 
本 ， eee Xo (其 会 把 当前 的 工作 目录 和 和 暂 存 区 移动 到 提出 分 支 的 版 
本 ) 用 命 Ki 445: 


e git checkout «branchname» ， 使 指针 指向 目标 分 支 
e git checkout -b «branchname» ， 创 建 目标 分 支 并 切换 分 支 
e git checkout «reference» ， 可 以 指向 任何 一 个 版 本 


git checkout next 


14d08d1 c4006ec e39dOb2 


e 


HEAD 





NOTE : 所 有 提交 是 更 具 HEAD 向 前 进 的 ， 所 以 前 后 分 支 后 则 会 跟着 Next 分 支 进 
{THR 。 


git commit -m 'message' 
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版 本 控制 


14d08d1 c4006e< e39d0b2 


5751303 





# -- 为 短 名 与 cd 类 似 
git checkout -- 


# 或 者 使 用 
# git checkout master 
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版 本 控制 


14d08d1 c4006ec e3900b2 


9791363 





git checkout -b Issue-26 


14d08d1 c4O06e« e39d0b2 


5/51363 





NOTE : 使 用 git branch -v 可 以 列 出 全 部 分 支 ， 带 * 表示 当前 所 属 分 支 
(HEAD 指向 分 支 ) 。 
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版 本 控制 


git checkout c4006ec 


14d08d1 c4006ec e39d0b2 


17151363 





当 HEAD 指针 与 具体 的 分 支 分 离 时 ， 我 们 将 其 称 之 为 ”detached head 。 如 果 
HEAD 在 分 离 状态 则 因 尽 量 避 免 在 此 状态 下 进行 提交 ， 只 做 内 容 的 查看 。 
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版 本 控制 


14008d1 c400be< e3900D2 


完全 回 退 
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版 本 控制 


eX 


L3 


14d08d1 c4006ec e39d0b3 1f2f476 


5751363 





使 用 git reset 可 以 将 当前 分 支 回 退 到 历史 中 的 某 个 版 本 ， 下 面 为 常用 的 三 种 方 
式 (三 种 的 区 别 是 恢复 的 内 容 时 候 同 时 会 恢复 的 工作 区 或 暂 存 区 ) 


e git reset --mixed «commit» RUFA’ APAÑAR 
e git reset --soft «commit» 内 容 存 入 暂 存 区 和 工作 区 
e git reset --hard «commit» 暂 存 区 和 工作 区 保留 现 有 状态 


git reset --mixed e390b3 
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版 本 控制 


14d08d1 c4006ec e39d0b3 


5/51363 


如 果 上 一 个 命令 如 果 使 用 hard 


git reset --hard e390b3 


14d08d1 c4006e« e39d0b3 


5751363 


1f2f4 76 





1f2f476 
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版 本 控制 


如 果 上 一 个 命令 如 果 使 用 hard 


get reset --soft e390b3 


ES 


14d08d1 c4006ec e39d0b3 1f2f476 


5751363 





此 方法 暂 存 区 和 工作 目录 不 会 发 生 任何 变化 仅仅 只 是 HEAD 指针 发 生 了 变化 ， 但 
原 有 的 提交 已 经 无 指针 指向 成 为 无 索引 的 提交 其 就 有 可 能 被 回收 。 


查询 所 有 提交 记录 


git reflog 会 根据 仓库 的 提交 顺序 按 顺 ta ， 其 中 包括 无 索引 的 提交 ， 可 
以 在 这 里 使 用 HASH 值 来 进行 ， 但 是 无 索引 的 提交 可 能 会 丢失 。 


使 用 捷径 


A^ 表示 A 上 的 父 提 交 ， 多 个 A 可 表示 以 上 的 多 个 级 别 。 A~n MATE 
A 之 前 的 第 n 次 提交 。 
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HEAD^^ 
HEAD^2 
HEAD^^1 


HEAD^ 
HEAD^1 
master^ 


next™1 1f2f476~1 






1f2f476 





c4006ec e39d0b3 





14d08d1 


reset 5 checkout 区 别 


两 种 方法 都 有 两 个 作用 范围 ， 一 个 是 分 支 操 作 (commit 操作 ) ， 
作 (file 操作 ) 


o 


4, oh 
命令 345 f 5 
wu 
t mm HEAD/Branch 
ait git reset HEAD^ 
` =e a 日 
rd Ju. iin 
git 
reset git reset README. md |G 
[file] 
git 
checkout git checkout master 是 / 否 
[commit] 
dit git checkout -- 
" README.md git 
checkout : GG 
xx. log 


stash 的 作用 


另 一 个 是 文件 操 


注释 


完全 回 退 到 某 
个 提交 (之 前 
所 在 的 位 置 将 
失去 索 ) 


恢复 暂 存 区 到 
某 个 提交 状态 
(不 移动 指 

4t) 

移动 当前 指针 
HEAD 到 某 个 
x (并 复制 
内 容 到 工作 目 
*) 


恢复 工作 目录 


到 某 个 状态 


版 本 控制 


git checkout next 


# error: Your local change to the following files whould be over 
written by checkout: 

# README. md 

# Please, commit your changes or stash them before you can switc 


h branches. 
# Aborting... 


* IRE Xu d 8| SZ X > LHRH d pxitgeiàÉoG Ax «AUE:.MA 
stash 就 使 用 ,git 中 的 特殊 区 (Stash 区 ) 来 帮 你 解决 这 个 问题 (因为 强 切 
回 丢 失当 前 的 工作 区 和 暂 存 区 的 内 容 ) 





git stash apply 


| 
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ese 1. X@TimeMachine: ~/Desktop/Git-In-Action (zsh) 
X@TimeMachine clear 
X@TimeMachine ; git status 
On branch master 
Changes not staged for commit: 

(use "git add <file>..." to update what will be committed) 

(use "git checkout -- <file>..." to discard changes in working directory) 





no changes added to commit (use "git add" and/or "git commit -a") 


X@TimeMachine git stash save ‘push to stash' 


Saved working directory and index state On master: push to stash 
HEAD is now at 5247179 initial commit 

X@TimeMachine git status 
On branch master 


nothing to commit, working directory clean 

X@TimeMachine git stash apply stash@{0} 
On branch master 

Changes not staged for commit: 


(use "git add <file>..." to update what will be committed) 
(use "git checkout -- <file>..." to discard changes in working directory) 


no changes added to commit (use "git add" and/or "git commit -a") 

X@TimeMachine git stash drop stash@{6} 
Dropped stashQ(0) (ef3fde8cc4ff4cac54c54fda33f2F55f28f664d4) 

X@TimeMachine git stash list 
X@TimeMachine | 


stash 可 以 把 当前 工作 区 和 暂 存 区 的 状态 以 栈 (Stck) 的 形式 保存 起 来 (每 次 
保存 都 会 推 一 个 内 容 到 stash RP) ， 并 返回 一 个 干净 的 工作 空间 (LHRH 


BE) 。 


NOTE: stash pop = stash apply + stash drop 类 似 于 JavaScript 中 的 


pop 操作 。 


NOTE+ : 什么 是 栈 ? 可 以 把 栈 想象 成 一 控盘 子 堆 (一 个 县 一 个 ) 


。 具体 关于 堆栈 的 


言 息 可 以 在 这 里 找到 。 如 果 还 看 不 懂 ， 建 议 完成 哈佛 大 学 在 线 计 算 机 入 门 课 程 


CS50 ， 可 以 在 这 里 找到 。 


merge 


版 本 控制 


© © © © 
。 ey 


3 j">|D 


— d NS 





使 用 git merge 可 用 于 合并 分 支 。 下 面 的 例子 是 将 next 分 支 合 并 到 
master 分 支 中 去 。 
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eoo 2. X@TimeMachine: ~/Desktop/Git-In-Action (zsh) 
X@TimeMachine git status 
On branch master 

nothing to commit, working directory clean 

X@TimeMachine git merge next 
Auto-merging README.md 
Merge made by the ‘recursive’ strategy. 

README.md | 2 

1 file changed, 2 insertions(+) 

X@TimeMachine git status 
On branch master 

nothing to commit, working directory clean 

X@TimeMachine git cat-file -p HEAD 
tree 0ea721be06feb39a8e579F 3b6dOddbc11a8dffb1 

parent 86f58b5e65d24b0cOf1b8cbc120a0620dceaObde 

parent 49f8d85f4ad6f82bf467ac66245d0f16b19d7e04 

author Li Xinyang <Lixinyang1026@gmail.com> 1436243265 +0800 

committer Li Xinyang <Lixinyang1026@gmail.com> 1436243265 +0800 





Merge branch 'next' 
X@TimeMachine 


解决 merge 冲突 


当 一 个 文件 被 同时 修改 时 (更 多 情况 为 同时 修改 相同 的 一 行 代码 时 ) 则 极 有 可 能 
生 合并 冲突 。 


git merge next master 

# Autom-merging README.md 

4 CONFLICT (content): Merge confilict in README.md 

4 Automatic merge failed; fix confilict and then commit the resu 
Tr 


git status 
On branch master 
You have unmerged paths. 
(fox contilict and run "git commit") 


both:modified: README.md 
no changes added to commit (use "git add" and/or "git commit - 


# 
# 
# 
UE 
# 
# 
a") 


(component, d expr2)( 
_. ctype0f (expr 


(component, expri, expr2){ 
type = typeof expr1 


>>>>>>> origin/master 
( expr1.type 一 二 二 





在 解决 完 合并 冲突 后 可 以 使 用 git add ， 然 后 git commit -m 'resove 
merge confilict' 来 完成 合并 冲突 解决 并 提交 一 个 新 的 版 本 。 


NOTE : git cat-file -p HEAD 可 用 于 显示 git 中 某 个 对 象 的 具体 信息 。 
NOTE+ : <<<<<<<< HEAD 与 三 三 三 三 三 三 三 三 三 之 间 为 HEAD 所 在 b o 


merge fast-forward 


也 并 不 是 所 有 的 合并 操作 都 会 造成 合并 从 图 (merge confilic)。 最 简单 的 一 种 合并 
是 fast-forward 仅仅 只 是 变化 HEAD 指向 的 位 置 (不 产生 新 的 合并 节点 ) © 


14d08d1 | 5 e39d0b2 


5751363 





如 果 需 要 生成 新 的 合并 节点 可 以 使 用 git merge next --no-ff 意思 是 合并 但 不 
使 用 fast-forward 。 


版 本 控制 


merge 不 足 














当 参 与 的 人 阅读 分 支 越 多 其 分 支 结构 就 越 复杂 和 难以 被 理解 。 如 何 实现 在 任何 状态 
下 的 线性 提交 ? 


如 需 完成 线性 提交 可 以 使 用 git rebase ， 其 可 以 修剪 提交 历史 的 基线 。 它 会 将 


不 同 分 支 的 提交 在 所 选 节点 上 进行 重演 (重演 并 重新 创造 新 节点 ) 这 里 
HEAD/Branch 均 会 发 生 移动 。 


git rebase master 
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版 本 控制 





但 有 时 并 不 dedu 分 支 上 的 全 部 提交 节点 统统 进行 重演 。 则 可 以 使 用 git 
rebase --onto 来 选择 需要 重演 的 提交 节点 。 


git rebase --onto master 5751363 





NOTE: 上 面 的 红色 的 节点 ， 未 被 重建 (REF) 


rebase 4 merge 区 别 
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版 本 控制 


Graph Description _ 
master | Merge branch 'feature/awesomestuff 


Commit on feature/awesomestuff 2 


Commit on feature/awesomestuff 1 


Commit on master 4 
— Commit on master 3 
rapi Description " 
I — 一 = Commit on master 2 
Commit on master 4 
Merge) Commit on master 1 


S 













Commit on master 3 


feature/awesomestuff| Commit on feature /awesomestuff 2 


Commit on feature/awesomestuff 1 


Commit on master 2 [Rebase) 


Commit on master 1 


First commit 








Description 
(4* feature/awesomestuff | Commit on feature/awesomestuff 2 


Commit on feature/awesomestuff 1 


Commit on master 4 
<> 


Commit on master 3 












First commit 












Commit on master 2 
Commit on master 1 






First commit 






rebase 会 产生 线性 的 提交 历史 ， merge 则 会 产生 多 个 不 同 分 支 的 合并 节点 。 
所 以 具体 没有 好 坏 之 分 ， 可 根据 使 用 的 需求 来 决定 。 


2 Et 有 分 支 上 使 用 rebase (例如 master PX) 这 会 导致 其 他 开发 
者 在 进行 拉 取 (Pull) 时 ， 必 须 进 行 合并 且 合 并 中 包含 重复 的 提交 。 
tag 


不 论 是 Branch 还 是 HEAD 它们 均 为 动态 指针 ， 如 果 想 定义 一 个 静止 的 标示 则 可 以 
使 用 git tag ， 它 将 将 给 发 布 的 提交 版 本 设置 一 个 别名 。 在 设置 了 标签 后 就 可 以 直 
接 使 用 标签 名 来 代替 它 所 指 代 的 版 本 提交 了 。 


git tag v0.1 e39d9b2 


git checkout v0.1 
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远程 操作 


远程 操作 可 以 将 本 地 仓库 推送 至 远程 仓库 服务 器 。Git 支持 许多 主流 的 通信 协议 ， 
其 中 包括 Local ^ HTTP ^ SSH 、 还 有 Git 。 服 务 器 只 应 该 是 作为 同步 之 用 
(被 动 接受 既 可 ) ° 


初始 化 一 个 本 地 的 远程 服务 器 


git init ~/git-server --bare 


eee 1. X@TimeMachine: ~/Desktop/Git-In-Action (zsh) 
X@TimeMachine git init ~/git-server --bare 
Reinitialized existing Git repository in /Users/X/git-server/ 
X@TimeMachine tree ~/git-server 
/Users/X/git-server 
[-- HEAD 
|- config 
[I-- description 
I-- hooks 

|- applypatch-msg.sample 

[-- commit-msg.sample 

[-- post-update.sample 

[-- pre-applypatch.sample 

— pre-commit.sample 

[— pre-push. sample 

[-- pre-rebase.sample 

[— prepare-commit-msg.sample 

L—— update. sample 
— info 

L— exclude 

objects 

|-- info 

L— pack 

refs 

[-- heads 

L— tags 





8 directories, 13 files 
X@TimeMachine 


推送 


git push 可 以 将 当期 的 全 部 版 本 提交 提交 推送 至 远程 仓库 ， 其 完成 了 提交 历史 
的 完全 不 复制 并 同时 移动 复制 版 本 的 HEAD 与 Branch。 


X@TimeMachine pwd 
/Users/X/Desktop/Git-In-Action 

X@TimeMachine git push ~/git-server master 
Counting objects: 15, done. 
Delta compression using up to 8 threads. 

Compressing objects: 100% (6/6), done. 

Writing objects: 100% (15/15), 1.16 KiB | © bytes/s, done. 

Total 15 (delta 1), reused 0 (delta 0) 

To /Users/X/git-server 

* [new branch] master -> master 


Eat Eng ~/Desktop/Git-In-Action 





git remote 可 用 于 添加 远程 仓库 的 别名 。 


eee 1. X@TimeMachine: ~/Desktop/Git-In-Action (zsh) 
X@TimeMachine pwd 
/Users/X/Desktop/Git-In-Action 
X@TimeMachine git push ~/git-server master 
Counting objects: 15, done. 
Delta compression using up to 8 threads. 
Compressing objects: 100% (6/6), done. 
Writing objects: 100% (15/15), 1.16 KiB | © bytes/s, done. 
Total 15 (delta 1), reused © (delta 0) 
To /Users/X/git-server 
* [new branch] master -> master 
X@TimeMachine git remote add origin ~/git-server 
OR SET ~/Desktop/Git-In-Action git remote -v 
origin /Users/X/git-server (fetch) 
origin /Users/X/git-server (push) 
X@TimeMachine more .git/config 
[core] 
repositoryformatversion = 0 
filemode rue 
bare = false 





logallrefupdates = true 
ignorecase = true 
precomposeunicode = true 
[remote "origin"] 
url = /Users/X/git-server 
fetch = +refs/heads/*:refs/remotes/origin/* 


X@TimeMachine Desktop/Git-In-Action 


# 更 改 仓库 url Xu 
git remote set-url origin 'https://github.com/li-xinyang/FEND No 
te.git' 


远程 push 冲突 


可 以 先 使 用 git fetch + git merge 来 解决 冲突 的 问题 。 git pull 就 等 同 
于 fetch 与 merge 的 合并 。 


克隆 远程 仓库 


使 用 git clone 可 以 克隆 远程 仓库 ， 并 将 克隆 地 址 默认 设 为 origin 。 


eee 1. X@TimeMachine: ~/Desktop/FE_AngularJS (zsh) 
X@TimeMachine git clone https://github.com/li-xinyang/FE AngularJS.git 
Cloning into 'FE AngularJS'... 

remote: Counting objects: 45, done. 

remote: Total 45 (delta 0), reused 0 (delta 0), pack-reused 45 

Unpacking objects: 100% (45/45), done. 

Checking connectivity... done. 

X@TimeMachine cd FE AngularJS 

X@TimeMachine git remote -v 

origin https://github.com/li-xinyang/FE AngularJS.git (fetch) 

origin https://github.com/li-xinyang/FE AngularJS.git (push) 

X@TimeMachine | 





技术 选择 
模块 化 


NOTE : 以 下 讨论 都 是 基于 JavaScript 的 模块 组 织 〈 每 个 模块 均 以 文件 形式 组 
织 ) ， 而 非 工 程 的 模块 化 。 


The secret to building large app is never build arge apps. Break your 
applications into small pieces. Then, assemble those testable, bite-sized 
pieces into your big application. 


Justin Meyer 
其 他 语言 中 的 模块 支持 


e Java- import 
e C#- using 
e CSS- @import 


但 在 JavaScript 中 并 不 存在 模块 组 织 在 并 不 支持 ， 于 是 产生 了 很 多 ， 模 块 系统 。 
模块 的 职责 


e 封装 实现 (将 复杂 的 内 容 于 外 界 个 例 ) 
e REET (外 部 可 通过 接口 使 用 模块 ) 
e 声明 依赖 (提供 给 模块 系统 使 用 ) 


模块 的 使 用 
反 模 式 (Anti-Pattern) 
反 模 式 既 没有 使 用 任何 设计 模式 。 


math .js 


function) add(a, b) 
return a * b; 


j 


function sub(a, b) { 
return a - b; 


上 面 的 代码 有 下 面 的 几 个 缺点 : 


e 无 封装 性 
e 接口 结构 不 明显 


calculator.js 


var action = 'add'; 
function compute(a, b) ( 
switch (action) { 
case 'add': return add(a, b); 
case 'sub': return sub(a, b); 


上 面 的 代码 也 有 几 个 缺点 : 


e. 没有 依赖 声明 
e 使 用 全 局 状态 


字面 量 (Object Literal) 


math.js 


var math - ( 
add: function(a, b) { 
return a * b; 


ty 


sub: function(a, b) ( 
return a - b; 


} 
He 
结构 性 好 ， 但 没有 访问 控制 。 


calculator.js 


var calculator = { 
action: 'add', 
compute: function(a, b) ( 
switch (action) ( 
case 'add': return add(a, b); 
case 'sub': return sub(a, b); 


同样 没有 依赖 声明 

IIFE (Immediately-invoked Function Expresion) 
其 为 自 执 行 函 数 。 

版 本 一 


calculator.js 


var calculator = (function()( 
var action - 'add'; 
return { 
compute: function(a, b) { 
switch (action) ( 
case 'add': return add(a, b); 
case 'sub': return sub(a, b); 


} 
HO; 


上 面 的 代码 可 以 进行 访问 控制 ， 但 是 不 能 进行 依赖 声明 。 
版 本 二 


calculator.js 


var calculator = (function(m){ 
var action = 'add'; 
function compute(a, b) ( 
switch (action) ( 
case 'add': return m.add(a, b); 
case 'sub': return m.sub(a, b); 


} 


return { 
compute: compute; 
} 
})(math) 


上 面 的 代码 虽然 可 以 显示 的 声明 依赖 ， 但 是 仍然 污染 了 全 局 变量 ， 而 且 必 须 手 动 进 
行 依赖 管理 。 

命名 空间 (Namespace) 

命运 空间 可 以 解决 全 局 变量 的 污染 的 问题 。 


math .js 


namespace('math', [], function(){ 
function add(a, b) { return a + b; } 
function sub(a, b) { return a - b; } 


return { 
add: add, 
sub: sub 
} 
}) 


calculator.js 


£f 依赖 声明 依赖 注入 

V | | 

namespace('calculator', ['math'], function(m){ 
var action = 'add'; 


function compute(a,b) { 
return m[action](a, b); 


} 


return { 
compute: compute; 
} 
}) 


模块 管理 


复杂 的 模块 管理 ， 不 能 单纯 的 通过 代码 文件 的 排列 顺序 来 进行 管理 。 于 是 引入 了 模 
块 系统 ， 它 有 下 面 的 职责 : 


e 依赖 管理 (加 载 、 分 析 、 注 入 、 初 始 化 一 ) 
e 决定 模块 的 写法 


常用 的 模块 系统 有 Common.JS ^ AMD 、 语 言 基 本 的 模块 化 。 
CommonJS 
CommonJS 是 一 个 模块 规范 ， 通 常 适用 于 非 浏览 器 环境 (NodeJS) 。 


A module spec for JavaScript outside the browser. 


math.js 


function add(a, b) f 
return a * b; 

} 

function sub(a, b) { 
return a - b; 


} 


exports.add 


add; 
sub; 


exports.sub 


calculator.js 


// 依赖 声明 
var math = require('./math'); 


function Calculator(container) ( 
ae 


} 


Calculator.prototype.compute = function(){ 
this.result.textContent = math.add(...); 


// 接口 暴露 


exports.Calculator = Calculator; 


优点 


e 依赖 管理 成 熟 可 靠 

e 社区 活跃 且 规 范 接受 度 高 

e 运行 时 支持 且 模 块 化 定义 简单 
e 文件 级 别 的 模块 作用 域 隔离 
e 可 以 处 理 循环 依赖 


缺点 


e. 不 是 标准 组 织 规范 
e 同步 请 求 未 考虑 浏览 器 环境 (可 以 使 用 Browserify 来 解决 ) 


# browserify 为 npm 下 命令 行 工具 
# > A Linux/Unix 添加 至 命令 
browserify file0.js > file1.js; 


打包 后 的 文件 如 下 所 示 。 


(function e(t,n,r)(function s(o,u)(if(!n[o])(if(!t[o])(var a=typ 
eof require-z'"function"&&require;if(!u&&a)return a(0,!0);if(i)re 
turn i(0,!0);var fznew Error("Cannot find module '"«o-"'");throw 
f .code="MODULE_NOT_FOUND",f}var l=n[o]={exports: {}};t[o][0].cal 
1(1.exports, function(e){var n=t[o][1][e]; return s(n?n:e)},1,1.ex 
ports,e,t,n,r)}return n[o].exports}var i=typeof require=="fFuncti 
on"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1: [Ff 
unction(require, module, exports) { 


3, 015 0, I1); 


AMD (Asynchronous Module Definition ) 
适合 异步 环境 的 依赖 管理 方案 。 


math .js 


// 依赖 列表 

XA | 

define([], function(){ 
function add(a, b) { return a + b; } 
function sub(a, b) { return a = b; } 


// 接口 暴露 


return { 
add: add, 
sub: sub 
b 
3) 


calculator.js 


define(['./math'], function(math) { 
function Calculator(container) { 
AM 


} 
Calculator.prototype.compute = function(){ 
this.result.textContent = math.add(...); 


m 


// REET 
return { 
Calculator: Calculator; 


优点 


e 依赖 管理 成 熟 可 靠 

e 社区 活跃 且 规范 接受 度 高 

e 转 为 异步 环境 制作 ， 适 合 浏 览 器 

e 支持 CommonJS 的 书写 方式 

e 通过 插件 API 可 以 加 载 非 JavaScript 资源 

e 成 熟 的 打包 构建 工具 ， 并 可 结合 插件 一 同 使 用 


缺点 
e BORGRGUE SC HLAPRE 
e 酷 基本 的 支持 ， 需 要 引入 额外 的 库 


e 无 法 处 理 循环 依赖 
© 无 法 实现 条 件 加 载 


Simplified CommonJS Wrapping 


使 用 同样 的 CommonJS 的 依赖 管理 书写 方法 ， 之 后 在 使 用 正则 表达 式 来 提取 依赖 
列表 o 


define(function(require, exports){ 
// 依赖 声明 
var math = require('./math'); 


function Calculator(container) f 
OA 


} 
Calculator.prototype.compute = function(){ 
this.result.textContent = math.add(...); 


g 


exports.Calculator = Calculator; 


}) 


Loader Plugins 


允许 调用 处 理 脚 本 外 的 其 他 资源 〈 例 如 HTML 与 CSS 文件 ) ， 这 样 就 可 以 形成 一 
个 完整 的 组 件 。 


完整 组 件 = 结构 + 逻辑 + 样式 


ECMAScript 6 Module 
ECMAScript 6 中 的 模块 化 管理 。 


math.js 


funetronnada(ar bY 
return a + b; 


} 


function sub(a, b) { 
return a- b; 


pd expor t 关键 字 A 漏 接口 


export (add, sub) 


calculator.js 


import {add} from './math'; 


class Calculator { 
constructor(container) {} 
compute(){ 
this.result.textContent = add(+this.left.value, +this.right. 
value); 
} 


} 
export{Calculator} 


优点 


e 真正 的 规范 未 来 标准 

e 语言 基本 支持 

e 适用 于 所 有 的 JavaScript 允许 环境 
e 可 用 于 处 理 循环 依赖 


缺点 


e 规范 未 达到 稳定 级 别 
Af 


SystemJS 
SystemJS 是 一 个 动态 模块 加 载 器 ， 下 面 是 它 的 一 下 特性 : 


e 支持 加 载 AMD 

e 支持 加 载 CommonJS 

e 支持 加 载 ES6 

e 支持 加 载 Transpiler 也 可 支持 任意 类 型 资源 


模块 管理 的 对 比 


e |IFE， 没 有 解决 核心 的 依赖 分 析 和 注入 的 问题 。 
e AMD， 可 以 直接 使 用 ， 库 基本 的 支持 。 

e CommonJS， 可 以 直接 使 用 ， 在 运行 时 的 支持 。 
e ES6， 语 言 本 身 的 支持 。 


使 用 插件 工具 ， 可 以 将 后 三 种 模块 管理 系统 进行 相互 转换 。 


AE ZR 


NOTE : 以 下 讨论 都 是 基于 JavaScript 的 框架 。 


库 〈Library) 与 框架 (Framework) 的 区 别 


You call Library Framework 






ontain 





È 为 针对 特定 问题 的 解答 具有 专业 性 ， 不 控制 应 用 的 流程 且 被 动 调 有 用。 框架 具有 
控制 翻转 ， 决定 应 用 的 生命 周期 ， 于 是 便 集 成 了 大 量 的 库 。 


解决 方案 
常见 的 解决 方案 针对 的 方面 : 


e DOM 

e Communication 

e Utility 

e Templating 

e Component 

e Routing ( 单 页 系统 中 尤其 重要 ) 
e Architecture 


使 用 外 部 专业 解决 方案 的 原因 可 以 提高 开发 效率 ， 可 靠 性 高 (浏览 器 兼容 ， 测 试 履 
i) ， 也 配备 优良 的 配套 (文档 及 工具 ) 。 如 果 外 部 框架 的 质量 可 可 人 靠 性 无 法 保证 
或 无 法 满足 业务 学 期 时 则 不 应 该 选择 外 部 的 框架 。 


实际 项 目 中 的 使 用 


e 开发 式 : 基于 外 部 模块 系统 自由 组 合 
e 半 开 放 : 基于 一 个 定制 的 模块 系统 ， 内 部 外 部 解决 方案 共存 
e 封闭 式 : 深度 定制 的 模块 系统 不 引入 外 部 模块 


DOM 


与 其 相关 的 有 Selector ` Manipulation ` Event (DOM) 、Animation。 它 的 主要 职 
责 则 为 为 下 面 的 这 些 


e 提供 便利 的 DOM 查询 、 操 作 、 移 动 等 操作 
e 提供 事件 绑 定 及 事件 代理 支持 

e 提供 浏览 器 特性 检测 及 UserAgent 侦 测 

e 提供 节点 属性 、 样 式 、 类 名 的 操作 

e 保证 目标 平台 的 跨 浏 览 器 支持 


常用 的 DOM 库 有 jQuery (使 用 链 式 接口 ) > zepto.JS > MOOTOO.JS (使 用 原 
+ DOM 对 象 ， 通 过 直接 跨 站 了 DOM 原生 对 象 ) © 


基础 领域 
库 名 大 小 优点 缺点 
念 洁 X Ay 3E ox x x 
monies naim ARERR 
MOOTOO.JS 96KB IE6+ $g. ARI DOM 与 Nn 让 
AJAX à 
! 社区 强大 普及 率 高 、 包 装 CRTA (F 
Jey SAKE ESATE e DOM 易 混淆 ) 
DAB DR Oy ARA JQuery 
zepto.JS 25KB 1E10+ jQuery 兼容 、 提 供 简 单 P Buy ad 
4n 38 8] X, ds 
手势 操作 少 3 H AES 


专业 领域 


领域 EE kd 描述 
手势 ^ HammerJS 12KB pea iu E Hold ` Transform 、 
P Velocity.JS 12KB 复杂 动画 序列 实 不 仅 局 限于 DOM 
深 动 。 issorolJS 。 19KB ba ston RE 


Communication 


与 其 相关 的 有 XMLHttpRequest ` Form ` JSONP ` Socket o 它 的 主要 职责 则 为 为 
下 面 的 这 些 


e 处 理 与 服务 器 的 请 求 与 相应 

e 预 处 理 请 求 数据 与 响应 数据 Error/Success 的 判断 封装 

e 多 类 型 请 求 ， 统 一 接口 (XMLHttpRequest1/2 ^ JSONP » iFrame) 
e 处理 浏览 器 兼容 性 


库 名 大 小 支持 
^ 各 u^ AS AS 域 x . 
Reqwest  3.4KB 2 e 稳定 IE6+ 支 持 、CORS J£  Promise/A 


代码 少 、 支 持 XMLHttpRequest2、CORS 跨 域 、 支 持 高 


qwest 29KB yy ge dn ( ArrayBuffer ` Blob ` FormData) 


实时 性 要 求 高 的 需求 
库 名 支持 
sodeto | nEs 支持 二 进 制 数 据 流 、 智 能 自动 回 退 支持 、 支 持 多 种 后 端 语 


€ (NodeJS 最 为 稳 受 ) 


Utility (Lang) 


与 其 相关 的 有 BRIBE Shim (保证 实现 与 规范 一 致 )、Flow Controle 它 的 主 
要 职责 则 为 为 下 面 的 这 些 


e 提供 JavaScript 原生 不 提供 的 功能 
e 方法 门面 包装 使 其 便于 使 用 


e 异步 列队 及 流程 控制 


库 名 大 小 描述 
es5-shim 53KB 提供 ES3 环境 下 的 ES5 支持 
es6-shim 38KB 
underscore 16.5KB 兼容 IE6+ 的 扩展 功能 函数 


其 为 underscore 的 高 性 能 版 本 ， 方 法 多 为 runtime 编 


Lodash 50KB 译 出 来 的 


Templating 


与 其 相关 的 有 String-based ` DOM-based ` Living Template ° 


基于 字符 串 的 模板 
«h3»(title) «/h3» <h3>Hello</h3> 
{#list users as User} =f 一 一 «li»HanMeimei«/li» 
«li» (user)«/li» <li>LiLei</li> 


{/list} <li> Jack: 


TRAN 效 据 FR EN 


之 后 的 数据 修改 展现 不 会 进行 变化 ， 如 果 重 新 绘制 (性 能 低 ) 页 面 则 会 去 除 已 有 的 


DOM 事件 。 


基于 DOM 的 模板 


技术 选 型 


<h3>({title}</h3> 


<h3>Hello</h3> 


«ul» | { 
<lirepeat='User in users'» | 
(user) 


n ÀMÀÀ—À MÀ ÀÀÓMÀHÀÀ 


i : | <ul> 
titie: helo", —— <li>HanMeimei</li> 
users: ['HanMeime’, «li»LiLei«/li» 
| "Uer, Jack] eigen 
<li>Jack</li> 


| </ul> 


修改 数据 可 以 改变 显示 (性 能 更 好 ) 也 会 保留 DOM 中 的 已 有 事件 ， 最 终 导 致 


DOM 树 与 数据 模型 相 联 系 。 


Living-Template 
| <h3>{title}</h3> | <h3>Hello</h3> 
| «ul» | | ( «ul» 
| {#list users as user} : 十 title: "hello", «li»HanMeimei«/li» 
| <li>{user}</li> i | Users [HonMeimei 'LiLei', 'Jack'] | <\i>LiLei</li> 
| {/list} L | «li» Jack«/li» 
</ul> 


; </ul> 


mm mm mmm mmm mmm mmm mmm mmm 


其 拼接 了 字符 串 模板 和 DOM 模板 的 技术 (类似 Knockout.JS 注释 的 实现 ) 


nmm mmm mmm mmm m m m mm mm mm mm mm mm mmm mom omm 


导致 DOM 树 与 数据 模型 相 联系 。 


， 最 终 


YN 
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String-based DOM-based Living-Template 


好 处 可 以 服务 器 端 运 
行 

解决 方 。” dustJS^ Angular.JS ^ Regular.JS ^ 

案 hogan ` dot.JS Vue.JS ` Knockout Ractive.JS ` htmlbar 

初始 化 

时 间 KXK x KX 

动态 

pM Yeh Yo 

新 

DOM: dees. 无 X 

无 天 

语法 KOX X ION 

E Yo Y 

本 

SVG 

支持 Je KA DON 

ZAE x * Xxx 
Component 


与 其 相关 的 有 Modal - Slider » DatePicker ` Tabs ` Editor (其 为 产品 开发 中 最 耗 时 
也 是 最 必要 的 一 部 分 ) 。 它 的 主要 职责 则 为 为 下 面 的 这 些 : 

e 提供 基础 的 CSS 支持 

e 提供 常见 的 组 件 

e 提供 声明 式 的 调用 方式 (RM Bootstrap) 


组 件 库 名 第 特定 支持 


Mobile First A AmI ° T LESS SASS 组 织 


Bootstrap 3x ， 可 定制 Ul， 提 供 大 量 组 件 
ile First 7 3 ， 基 282R > TER 
Foundation 5.x Mobile First 式 栅 格 ， 基 于 SASS 组 织 ， 可 定制 IE9+ 


UI > 7144 X € Za 
NOTE: 有 存在 不 使 用 jQuery 版 本 的 Bootstrap 可 供 使 用 。 


Router 


与 其 相关 的 有 Client Side ` Server Side。 它 的 主要 职责 则 为 为 下 面 的 这 些 


e 监听 URL 变化 ， 并 通知 注册 的 模块 


e 通过 JavaScript 进 和 
e 历史 管理 


A- 


主动 跳 转 


e 对 目标 浏览 器 的 兼容 性 支持 


路 由 库 名 大 小 
page.JS 6.2KB 


Director.JS 10KB 
Stateman 10KB 
crossroad.JS  7.5KB 


Architecture ( 4273 ) 


特定 支持 


类 似 Express.Router 的 路 由 规则 的 前 端 路 由 IE8+ 
库 


可 以 前 后 端 使 用 同一 套 规 则 定义 路 由 IE6+ 
处 理 深 层 复 杂 路 由 的 独立 路 优 库 IE6+ 
老牌 路 由 库 ，API Ife A E 


与 其 相关 的 有 MVC、MVVC、MV*， 解 耦 又 可 以 通过 很 多 方式 来 实现 (例如 事件 、 
DE) 。 它 的 主要 职责 则 为 为 下 面 的 这 些 


e 提供 一 种 凡是 帮助 (强制 ) 开发 者 进 Hk ARAB 


e 视图 与 模型 分 离 
e 容易 进行 单元 测试 
e 容易 实现 应 用 扩展 


下 面 以 MVVM 为 例 : 





ViewModel 


e Model 数据 实体 用 于 记录 应 用 程序 的 数据 

e View 友好 的 界面 其 为 数据 定制 的 反映 ， 它 包含 样式 结构 定义 以 及 VM 享有 的 
声明 式 数 据 以 及 数据 绑 定 

e ViewModel 其 为 View 4 Model 的 粘 合 ， 它 通过 绑 定 事件 与 View 交互 并 可 以 
调用 Service 处 理 数据 持久 化 ， 也 可 以 通过 数据 绑 定 将 Model 的 变动 反映 到 
View 中 








NOTE : MV 不 等 同 于 SPA， 路 由 是 MV 系统 的 课 定 位 状态 信息 来 源 。NOTE+ : 
单 页 系统 的 普 世 法 则 为 可 定位 的 应 用 程序 状态 都 应 该 统一 由 路 由 系统 进入 ， 以 避免 
网 状 的 信息 流 。 NOTE++ : 库 与 框架 选择 站 点 microjs javascriptOO JavaScripting 
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开发 实践 

系统 设计 

NOTE: 综合 运用 实习 案例 ， 本 章 使 用 案例 为 网 易 云 音乐 ， 并 且 主 要 关注 前 端 工程 
师 的 工作 职责 ， 其 他 工程 师 的 职责 规范 并 不 包含 。 

交互 流程 说 明 

通过 交互 文案 来 了 解 用 户 行为 与 异常 提示 。 

系统 分 解 

例如 下 面 的 独立 的 子 系统 : 

e 注册 登录 密码 


e 系统 主 框架 
o 顶 栏 


o 边栏 
m 歌 单 操作 
a 其 他 

o 底 栏 
m 128 
m 播放 列表 
m 歌曲 详情 


o 内 容 区 


系统 分 解 必须 对 照 交互 稿 做 到 百分之百 的 对 应 ， 不 能 漏 掉 任 何 一 个 模块 。 后 续 的 开 
发 与 评估 都 需 根 据 此 分 解 进行 。 


接口 设计 


分 析 模块 交互 理解 需求 以 及 交互 行为 。 对 于 数据 获取 的 形式 进行 适当 的 假设 ， 并 定 
义 数据 类 型 、 模 板 资 源 、 异 步 接口 、 以 及 页 面 摘要 。 


项 目 结构 


根据 规范 说 明 就 可 以 做 出 项 目 的 结构 定义 , 项 目 结构 分 两 部 分 后 端 模 板 与 前 端 实 
现 。 


初始 代码 


前 端 工程 师 需 要 在 开发 工具 中 添加 开发 规范 ， 以 及 测试 使 用 的 模拟 数据 。 


系统 实现 


视觉 说 明 (视觉 稿 ) 中 包含 各 个 情况 下 用 户 界 面 的 显示 样式 ， 其 定义 了 交互 稿 中 的 
所 有 效果 。 之 后 则 需要 从 中 提取 出 通用 组 件 ， 其 中 包括 : 


e 通用 原件 (Logo， 提 示 ， 输 入 框 ， 图 标 ， 按 钮 等 ) 


e 通用 列表 
e 复合 组 件 (留言 板 类 ) 
e 浮 层 弹出 


测试 发 布 


使 用 同步 模拟 数据 进行 本 地 测试 测试 ， 只 需 在 入 口 页 面 引 入 既 可 。 有 异步 处 理 则 可 
以 使 用 第 三 方 的 代理 软件 既 可 。 在 本 地 测试 完 后 ， 需 要 前 后 端的 对 接 联 调 。 去 除 模 
拟 同 步 数据 ， 直 接 使 用 后 端 数据 既 可 。 然 而 对 于 异步 数据 联 调 直 接 去 除 代 理 转向 既 
可 o 


在 完成 测试 后 需要 打包 发 布 上 线 ， 可 使 用 自动 化 工具 将 工程 文件 打包 优化 (合并 压 


ME 


缩 混淆 ) 。 


Table of Contents generated with Doc Toc 


e DX 
o HTML 
o CSS 
o JavaScript 


PŽ 
HTML 


N/A 


CSS 


e CSS Mastery: Advanced Web Standard Solutions 


JavaScript 


e Professional JavaScript for Web Developers 

e DOM Scripting: Web Design with JavaScript and the Document Object Model 
e AdvancED DOM Scripting: Dynamic Web Design Techniques 

e JavaScript: The Definitive Guide 


Version Control 


e Git 简明 指南 
e Git Pro 


